Pregunta Comprender los eventos táctiles


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 los navegadores móviles solo en touchstart evento (duh). He creado un violín 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:

los Navegador de Android no dispara eventos táctiles Simplemente trata de emular los clics del mouse con golpecitos, disparando mousedown, mouseup y click eventos de forma consecutiva, pero los dos toques simplemente acercan y alejan esa página.

Cromo para Android activa el evento de inicio táctil cuando el dedo toca la pantalla. Si se lanza lo suficientemente pronto, se dispara entonces mousedown, mouseup, touchend y finalmente click eventos.

En caso de toque largo, después de medio segundo, dispara mousedown y mouseupy touchend cuando se levanta el dedo, sin click evento al final.

Si tu mueve tu dedo, dispara un touchmove evento un par de veces, luego se dispara touchcancel evento, y nada sucede después, ni siquiera un touchend evento al levantar el dedo.

UN doble toque activa las funciones de acercar / alejar, pero en función de los eventos activa el combo touchstart-touchevent dos veces, sin eventos de mouse disparados.

Firefox para Android correctamente dispara el touchstart evento, y en caso de incendios de tap corta mousedown, mouseup, touchend y click después.

En caso de toque largo, dispara mousedown, mouseup y finalmente touchend eventos. Es lo mismo de Chrome para estas cosas.

Pero si tu mueve tu dedo, si hay incendios touchmove continuamente (como uno puede esperar) pero no lo hace no disparar el touchleave evento cuando el dedo deja el elemento con el oyente del evento, y no dispara el touchcancel evento cuando el dedo sale de la ventana del navegador.

por doble toque, se comporta como Chrome.

Opera Mobile hace lo mismo de Chrome y Firefox para un toque corto, pero en caso de pulsación larga activa algún tipo de característica de intercambio que realmente quiero desactivar. Si mueve su dedo, o toca dos veces, se comporta como Firefox.

Chrome beta hace lo habitual para los grifos cortos, pero en el caso de grifos largos no enciende el mouseup evento más, solo touchstart, entonces 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 caso de doble toque, no dispara eventos táctiles cuando se aleja, pero solo cuando se acerca 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 efectiva 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.


76
2018-01-23 18:31


origen


Respuestas:


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:

mantener presionado, tocar, doblepar, arrastrar, arrastrar, dragend, arrastrar, arrastrar,   dragleft, dragright, deslizar, deslizar, deslizar, deslizar, swiperight,   transformar, transformar, transformar, rotar, pellizcar, pinchazo,   pinchazo, toque (comienza la detección de gestos), liberación (detección de gestos)   termina)

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.

http://eightmedia.github.io/hammer.js/


24
2017-09-06 18:34



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, esencialmente todo desencadena mouseover y eventos relacionados; la mayoría también desencadena eventos táctiles, que generalmente completo (alcance touchend) antes de mouseover y luego continuar click (a menos que un cambio en el contenido de la página lo cancele). 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:

enter image description here

Para resumir algunos de los puntos clave:

Navegadores móviles

  • Todos los navegadores listados activan mouseover en el primer toque. Solo algunos navegadores de Windows Phone lo activan en un segundo toque.
  • Todo disparador click. No especifica qué cancelar click Si mouseover cambia la página (creo que la mayoría lo hace)
  • La mayoría de los navegadores activan mouseover después touchstart y touchend. Esto incluye iOS7.1 Safari, stock de Android, Chrome, Opera y Firefox para Android, y algunos (no todos los navegadores de Windows).
  • Varios navegadores Windows Phone (todos Windows 8 / 8.1 y una versión para 10) y varios navegadores Android de terceros (Dolphin, Maxathon, UC) activan mouseover  después  touchstart y touchend.
  • Solo disparadores Blackberry Playbook mouseover Entre touchstart y touchend
  • Solo faltan Opera Mini y Puffin (navegador Android de terceros) touchstart o touchend.

Navegadores de escritorio

  • Versiones razonablemente actualizadas de las computadoras de escritorio Chrome y Opera se comportan como sus contrapartes móviles, touchstart y touchend seguido por mouseover.
  • Los navegadores Firefox y Microsoft (IE <= 11 y muchas versiones de Edge) no desencadenan ningún touchstart y touchend eventos.
  • No hay datos en Macs, pero presumiblemente no hay soporte para navegadores Ma touchstart y touchenddada 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.


8
2017-09-13 18:51



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

  1. Al deslizar (touchstart-touchmove-touchend):

    1. Ningún evento de mouse (que incluye mouseover) se dispara.
    2. Mouseover se activa solo si se inicia Touchstart y touchend en el mismo elemento. (touchstart-touchmove-touchend-mouseover)
    3. 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.
  2. En el Tap (touchstart-touchend):

    1. Todos los eventos del mouse mouseover-mousemove-mousedown-mouseup-click después de un retraso
    2. 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:

  1. Mouseover se dispara antes de touchstart, lo que significa que el mouseover siempre dispara.
  2. Todos los eventos del mouse se activan en Tap, incluso si el valor predeterminado no se permite en touchstart.

3
2017-12-18 15:19



Sí, puedes iniciar un cronómetro entouchstart y termina en touchend y toma tus decisiones desde allí.

También puedes hacer ... digamos deslizar, mi disparo touchmove puedes obtener los coordonates del "dedo" y ver cuánto he viajado antes touchend se activa.

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.


2
2018-01-23 18:34