Solución mejorada adicional
Primero fui con el enfoque de Rich Bradshaw , pero luego empezaron a aparecer problemas. Al hacer e.preventDefault () en el evento 'touchstart' , la página ya no se desplaza y, ni la pulsación prolongada puede activar el menú de opciones ni el zoom con doble clic puede finalizar la ejecución.
Una solución podría ser averiguar qué evento se está llamando y simplemente e.preventDefault () en el último, 'tocar' . Dado que el 'touchmove' de scroll viene antes de 'touchend' , permanece como de forma predeterminada, y el 'clic' también se evita, ya que viene después de las palabras posteriores en la cadena de eventos aplicada a dispositivos móviles, así:
// Binding to the '.static_parent' ensuring dynamic ajaxified content
$('.static_parent').on('touchstart touchend', '.link', function (e) {
// If event is 'touchend' then...
if (e.type == 'touchend') {
// Ensuring we event prevent default in all major browsers
e.preventDefault ? e.preventDefault() : e.returnValue = false;
}
// Add class responsible for :hover effect
$(this).toggleClass('hover_effect');
});
Pero luego, cuando aparece el menú de opciones, ya no activa el 'toque' responsable de alternar la clase, y la próxima vez el comportamiento de desplazamiento será al revés, totalmente confuso.
Entonces, una solución sería, nuevamente, descubrir condicionalmente en qué evento estamos, o simplemente hacer eventos separados, y usar addClass () y removeClass () respectivamente en 'touchstart' y 'touchend' , asegurándose de que siempre comience y termine por respectivamente agregando y quitando en lugar de decidir condicionalmente sobre ello. Para finalizar, también vincularemos la devolución de llamada de eliminación al tipo de evento 'focusout' , siendo responsables de borrar la clase de desplazamiento de cualquier enlace que pueda permanecer encendida y nunca volver a visitarse, así:
$('.static_parent').on('touchstart', '.link', function (e) {
$(this).addClass('hover_effect');
});
$('.static_parent').on('touchend focusout', '.link', function (e) {
// Think double click zoom still fails here
e.preventDefault ? e.preventDefault() : e.returnValue = false;
$(this).removeClass('hover_effect');
});
Atención: Todavía se producen algunos errores en las dos soluciones anteriores y, piense también (no probado), el zoom de doble clic también falla.
Solución de Javascript ordenada y, con suerte, libre de errores (no :))
Ahora , por un segundo enfoque, más limpio, ordenado y receptivo, simplemente usando javascript (sin mezcla entre la clase .hover y pseudo: hover) y desde donde puede llamar directamente su comportamiento ajax en el evento universal (móvil y escritorio) 'clic' , Encontré una pregunta bastante bien respondida de la cual finalmente entendí cómo podía mezclar eventos táctiles y de mouse sin que varias devoluciones de llamada de eventos inevitablemente cambiaran las de los demás en la cadena de eventos. Así es cómo:
$('.static_parent').on('touchstart mouseenter', '.link', function (e) {
$(this).addClass('hover_effect');
});
$('.static_parent').on('mouseleave touchmove click', '.link', function (e) {
$(this).removeClass('hover_effect');
// As it's the chain's last event we only prevent it from making HTTP request
if (e.type == 'click') {
e.preventDefault ? e.preventDefault() : e.returnValue = false;
// Ajax behavior here!
}
});