javascript - body - meta html
Comprender los eventos táctiles (4)
Estoy tratando de hacer que algunas de mis bibliotecas funcionen con dispositivos táctiles, pero me cuesta mucho tratar de descubrir cómo son compatibles y cómo funcionan.
Básicamente, hay 5 eventos táctiles , pero parece que hay consenso entre navegadores móviles solo en el evento touchstart (duh). fiddle un fiddle como un caso de prueba.
He probado esto en mi Galaxy Note con Android 4 a bordo, pero también puedes consultar el enlace con un navegador de escritorio.
El objetivo es tratar de descubrir cómo manejar los toques, los dobles toques y los toques largos. Nada sofisticado.
Básicamente, esto es lo que sucede:
El navegador de valores de Android no activa eventos táctiles. Simplemente trata de emular los clics del mouse con mousedown , disparando mousedown , mouseup y mouseup click sucesos de forma consecutiva, pero con dos mousedown mouseup y mouseup página.
Chrome para Android activa el evento de inicio táctil cuando el dedo toca la pantalla. Si se lanza lo suficientemente pronto, se dispara luego mousedown , mouseup , touchend y finalmente click eventos.
En caso de toque prolongado , después de medio segundo dispara el mousedown y mouseup , y touchend cuando el dedo se levanta, sin ningún evento de click al final.
Si mueve su dedo , dispara un evento de touchmove un par de veces, luego dispara un evento de touchcancel , y no pasa nada después, ni siquiera un evento de touchend cuando levanta el dedo.
Un doble toque desencadena las funciones de acercar / alejar, pero en lo que touchstart touchevent touchstart el combo touchstart - touchevent dos veces, sin que se touchevent eventos de mouse.
Firefox para Android touchstart correctamente el evento touchstart y, en el caso de un corto toque, mouseup mousedown , mouseup , touchend y hace click luego.
En caso de toque largo , dispara mousedown , mouseup y finalmente eventos touchend . Es lo mismo de Chrome para estas cosas.
Pero si mueves el dedo , si los incendios se touchmove continuamente (como es de esperar), pero no touchleave evento touchleave cuando el dedo abandona el elemento con el detector de eventos, y no touchcancel evento touchcancel cuando el dedo se sale de la ventana del navegador.
Para dobles pulsaciones , se comporta como Chrome.
Opera Mobile hace lo mismo con Chrome y Firefox por un toque corto, pero en caso de una pulsación larga, activa algún tipo de función para compartir que realmente quiero desactivar. Si mueve su dedo, o toca dos veces, se comporta como Firefox.
La versión beta de Chrome hace lo habitual para los mouseup cortos, pero en el caso de los mouseup largos ya no mouseup evento mouseup , tan solo al touchstart , luego al mousedown después de medio segundo, luego touchend cuando se levanta el dedo. Cuando se mueve el dedo, ahora se comporta como Firefox y Opera Mobile.
En el caso de los toques dobles , no activa los eventos táctiles al alejarse , sino solo al acercar el zoom.
Chrome beta muestra el comportamiento más extraño, pero realmente no me puedo quejar porque es una versión beta.
La pregunta es : ¿hay una forma simple y de tratar de detectar golpes cortos, largos y dobles en los navegadores más comunes de dispositivos táctiles?
Lástima que no puedo probarlo en dispositivos iOS con Safari o IE para Windows Phone 7 / Phone 8 / RT, pero si alguno de ustedes puede, sus comentarios serán muy apreciados.
Aquí está mi última observación sobre eventos de touch y mouse en Android 4.3
Opera, Firefox y Chrome parecen tener un comportamiento estándar
Al deslizar (touchstart-touchmove-touchend):
- No se activa ningún evento de mouse (que incluye mouseover).
- Mouseover se activa solo si se inicia Touchstart y touchend en el mismo elemento. (touchstart-touchmove-touchend-mouseover)
- Si se evita el ajuste predeterminado en el inicio táctil: el comportamiento de deslizamiento predeterminado no funciona. no ocurren cambios con respecto a la activación de eventos del mouse.
En el Tap (touchstart-touchend):
- Todos los eventos del mouse mouseover-mousemove-mousedown-mouseup-click después de un retraso
- Si se evita el ajuste predeterminado en el inicio táctil, solo se enciende el mouseover.
El navegador predeterminado de Android tiene algunos comportamientos no estándar :
- Mouseover se dispara antes de Touchstart, lo que significa que el mouseover siempre dispara.
- Todos los eventos del mouse se activan en Tap, incluso si el valor predeterminado no se permite en touchstart.
Hay un recurso realmente excelente https://patrickhlauke.github.io/touch/tests/results/ que detalla el orden de los eventos en una cantidad asombrosa de navegadores. También parece que se actualiza regularmente (en septiembre de 2016, se actualizó por última vez en agosto de 2016).
La esencia es que, básicamente , todo desencadena mouseover y eventos relacionados; la mayoría también desencadenan eventos táctiles, que generalmente se completan (alcanzan touchend ) antes de mouseover y luego continúan haciendo click (a menos que un cambio en el contenido de la página cancela esto). Esas excepciones incómodas son afortunadamente relativamente raras (navegadores android de terceros y libro de jugadas de blackberry).
Ese recurso vinculado entra en un impresionante nivel de detalle, aquí hay una muestra de los primeros tres de muchos, muchos sistemas operativos, dispositivos y pruebas de navegador:
Para resumir algunos de los puntos clave:
Navegadores móviles
- Todos los navegadores listados activan
mouseoveren el primer toque. Solo algunos navegadores de Windows Phone lo activan en un segundo toque. - Todos los disparos
click. No especifica cuál cancelarclicksimouseovercambia la página (creo que la mayoría lo hace) - La mayoría de los navegadores activan
mouseoverdespués detouchstartytouchend. Esto incluye iOS7.1 Safari, stock de Android, Chrome, Opera y Firefox para Android, y algunos (no todos los navegadores de Windows). - Varios navegadores de Windows Phone (todos Windows 8 / 8.1 y una versión para 10) y varios navegadores de Android de terceros (Dolphin, Maxathon, UC) activan
mouseoverdespués detouchstartytouchend. - Solo Blackberry Playbook activa el
mouseoverentretouchstartytouchend - Solo Opera Mini y Puffin (navegador Android de terceros) carecen de
touchstartotouchend.
Navegadores de escritorio
- Versiones razonablemente actualizadas de las computadoras de escritorio Chrome y Opera se comportan como sus contrapartes móviles,
touchstartytouchendseguido demouseover. - Los navegadores Firefox y Microsoft (IE <= 11 y muchas versiones de Edge) no activan eventos
touchstartytouchend. - No hay datos en Macs, pero presumiblemente no hay navegadores Ma compatibles con
touchstartytouchenddada la escasez de interfaces de pantalla táctil de Mac.
También hay una increíble cantidad de datos en navegadores combinados con tecnologías de asistencia.
Sí, puede iniciar un temporizador en touchstart y finalizarlo en touchend y hacer sus elecciones desde allí.
También puedes hacer ... digamos que deslizar, mi touchmove disparo desencadenante puedes obtener los coordinados del "dedo" y ver cuánto touchend viajado antes de que se touchend .
No sé si hay alguna manera más sencilla en lugar de utilizar una biblioteca de eventos táctiles, pero supongo que podría escribir uno para los simples eventos ''tocar'', ''doble toque'', ''deslizar'' con bastante facilidad.
Si aún no lo has hecho, te sugiero que leas el código fuente de Hammer.js
https://github.com/hammerjs/hammer.js/blob/master/hammer.js
Entre los comentarios y el código, se trata de 1400 líneas, hay una gran documentación y el código es fácil de entender.
Puede ver cómo el autor ha elegido resolver muchos de los eventos táctiles comunes:
hold, tap, doubletap, drag, dragstart, dragend, dragup, dragdown, dragleft, dragright, swipeup, swipeup, swipeleft, swiperight, transform, transformstart, transformend, rotar, pellizcar, pinch, pinchout, touch (comienza la detección de gestos) , lanzamiento (finaliza la detección de gestos)
Creo que después de leer el código fuente comprenderá mucho mejor cómo funcionan los eventos táctiles y cómo identificar qué eventos es capaz de manejar el navegador.