Prevenir eventos de emulación de mouse (es decir, hacer clic) desde eventos táctiles en Mobile Safari/iPhone usando Javascript

Question

Al hacer una aplicación de una sola página Javascript con elementos DOM interactivos, he encontrado que la secuencia "mouseover-mousemove-mousedown-mouseup-click" ocurre en un grupo después de la secuencia de eventos "touchstart-touchmove-touchend".

También he encontrado que es posible evitar que los "eventos" mouse*-click suceda haciendo una "event.preventDefault()" durante el evento touchstart, pero solamente entonces, y no durante el touchmove y touchend. Este es un diseño extraño, porque no es posible saber durante el touchstart si el usuario tiene la intención de arrastrar o deslizar o simplemente tocar/hacer clic en el elemento.

Terminé configurando una bandera "ignore_next_click" en algún lugar vinculada a una marca de tiempo, pero esto obviamente no es muy limpio.

¿Alguien sabe de una mejor manera de hacerlo, o nos falta algo?

Tenga en cuenta que mientras que un "clic" puede ser reconocido como una secuencia "touchstart-touchend" (es decir, sin "touchmove"), hay ciertas cosas, como foco de entrada de teclado, que sólo pueden ocurrir cuando se click evento adecuado.

Answer 1

Me he encontrado con problemas similares al hacer aplicaciones multiplataforma HTML5/JS. La única respuesta real para mí fue preventDefault en los eventos táctiles, y en realidad administro los estados táctiles y disparar eventos de clic, arrastra, etc. de acuerdo con mi lógica. Esto suena mucho más desalentador de lo que realmente es, pero los eventos de clic/mouse imitados funcionan perfectamente en la mayoría de los navegadores móviles.

Haga clic y el extra de ratón secuencia son todo lo que hay para su conveniencia (y la compatibilidad). Mi regla general: si es por su conveniencia, pero es inconveniente, es mejor que lo mate.

En cuanto a los cuadros de entrada, solo necesitan los eventos touchend. He eliminado los eventos de clic/mouse y todavía he podido permitir que los navegadores móviles respondan correctamente a los toques en las entradas. Si todavía le está dando problemas, puede modificar el controlador de eventos a sólo eventos Supress en los no entradas:

function touchHandler(event) { 
    var shouldIgnore = event.target != null 
      && (event.target.tagName.toLowerCase() == "input" || event.target.tagName.toLowerCase() == "textarea"); 

    if(!shouldIgnore) e.preventDefault(); 
} 

Answer 2

he hecho una solución de mí mismo, ya que no he encontrado una solución suficiente en otra parte:

var isTouch = ('ontouchstart' in window); 

    function kill(type){ 
    window.document.body.addEventListener(type, function(e){ 
     e.preventDefault(); 
     e.stopPropagation(); 
     return false; 
    }, true); 
    } 

    if(isTouch){ 
    kill('mousedown'); 
    kill('mouseup'); 
    kill('click'); 
    kill('mousemove'); 
    } 

La comprobación de isTouch permite que las cosas funcionen normalmente en los dispositivos de entrada de ratón, pero elimina los eventos emulados en Safari/iOS. El truco está en usar useCapture = true en la llamada al addEventListener para que recojamos todos los eventos del mouse en la página sin hackear el código en toda la aplicación web. Consulte la documentación para la función aquí: https://developer.mozilla.org/en-US/docs/DOM/EventTarget.addEventListener?redirectlocale=en-US&redirectslug=DOM%2Felement.addEventListener

Editar:

Ahora que las bibliotecas para el manejo de este problema son mejores, sólo se puede usar algo como Fastclick como alternativa (https://github.com/ftlabs/fastclick).

Answer 3

Creating Fast Buttons for Mobile Web Applications tiene su solución al problema.

También tenga en cuenta que al usar IE10, prevenirDefault() no detiene los eventos del mouse fantasma/sintético/emulado después de un evento MSPointerDown, por lo que una verdadera solución de navegador cruzado es más difícil.

Answer 4

Si tiene que soportar los dispositivos que soportan el ratón y el tacto, otra solución es utilizar un detector de eventos de captura que detiene todos los eventos de ratón que se producen ya sea

• en un plazo después del evento táctil
• en la misma posición como el evento táctil
• en el mismo elemento de destino como el evento táctil

la información (tiempo, posición o elemento de destino) de la ev táctil ent se puede grabar en otro oyente de eventos de captura.

Answer 5

Envolver el código del mouse solo en una función Window.matchesMedia es la forma más limpia que encontré.

if (window.matchMedia('(hover: hover), (any-hover: hover), (-moz-touch-enabled: 0)').matches) { 
    el.addEventListener('mouseover', ev => { 
     // mouse handler, no simulated hover 
    } 
} 

Esto funciona para evitar los ataques simulados, pero es probable que también evite los clics simulados.

Nota: -moz-touch habilitado parte necesaria en Firefox desde la versión 58.