Comprendre les événements tactiles

Question

J'essaie de faire fonctionner certaines de mes bibliothèques avec des périphériques tactiles, mais j'ai du mal à comprendre comment elles sont prises en charge et comment elles fonctionnent.

En gros, il y a 5 événements tactiles , mais il semble y avoir un consensus parmi les navigateurs mobiles uniquement sur l'événement touchstart (duh). J'ai créé un violon comme test.

J'ai testé cela sur mon Galaxy Note avec Android 4 à bord, mais vous pouvez également vérifier le lien avec un navigateur de bureau.

Le but est d'essayer de comprendre comment gérer les robinets, les doubles robinets et les longs robinets. Rien d'extraordinaire.

En gros, voici ce qui se passe:

Le navigateur Android Android ne déclenche pas les événements tactiles. Il essaie simplement d'émuler des clics de souris avec des taps, en lançant des événements mousedown, mouseup et click consécutivement, mais des tapotements doubles font simplement un zoom avant ou arrière sur la page.

Chrome pour Android déclenche l'événement touchstart lorsque le doigt touche l'écran. S'il est publié suffisamment tôt, il se déclenche ensuite. mousedown, mouseup, touchend et enfin click événements.

Dans le cas de appui long, après environ une demi-seconde, il déclenche mousedown et mouseup, et touchend lorsque le doigt est levé, avec aucun événement click à la fin.

Si vous déplacez votre doigt, il déclenche un événement touchmove plusieurs fois, puis un événement touchcancel et rien ne se passe par la suite, même pas un événement. touchend événement lors de la levée du doigt.

A taper deux fois déclenche les fonctions de zoom avant/arrière, mais événement par événement, il déclenche le combo touchstart-touchevent deux fois, sans qu'aucun événement de souris ne soit déclenché.

Firefox pour Android déclenche correctement l'événement touchstart et, en cas de déclenchement bref, mousedown, mouseup, touchend et click par la suite.

Dans le cas de long tap, il déclenche mousedown, mouseup et enfin touchend événements. C'est la même chose de Chrome pour ces choses-là.

Mais si vous déplacez votre doigt, si vous déclenchez touchmove continuellement (comme on peut s’y attendre) mais cela ne pas déclenchez le touchleave événement lorsque le doigt quitte l'élément avec l'écouteur d'événements et ne déclenche pas l'événement touchcancel lorsque le doigt sort de la fenêtre de visualisation du navigateur.

Pour double taps, il se comporte exactement comme Chrome.

Opera Mobile fait la même chose que Chrome et Firefox pour un appui bref, mais en cas de pression longue, active fonction de partage que je souhaite vraiment désactiver. Si vous déplacez votre doigt ou double-cliquez dessus, il se comporte exactement comme Firefox.

Chrome beta fait comme d'habitude pour les taps courts, mais en cas de tapotements longs, il ne déclenche plus l'événement mouseup, mais touchstart, puis mousedown après une demi-seconde, puis touchend lorsque le doigt est levé. Lorsque le doigt est déplacé, il se comporte maintenant comme Firefox et Opera Mobile.

En cas de taper deux fois, les événements tactiles ne sont pas déclenchés lors d'un zoom arrière, mais uniquement lors d'un zoom avant.

Chrome beta présente le comportement le plus étrange, mais je ne peux vraiment pas me plaindre puisqu'il s'agit d'une version bêta.

La question est : existe-t-il un moyen simple et facile de détecter les tapotements brefs, longs et doubles tapés dans les navigateurs les plus courants des appareils tactiles?

Dommage que je ne puisse pas le tester sur des appareils iOS avec Safari, ou IE pour Windows Phone 7/Phone 8/RT, mais si certains d'entre vous le peuvent, vos commentaires seront très appréciés.

Answer 1

Si vous ne l'avez pas déjà fait, je vous suggère de lire le code source de Hammer.js

https://github.com/hammerjs/hammer.js/blob/master/hammer.js

Entre les commentaires et le code, il s’agit d’environ 1400 lignes. Il existe une excellente documentation et le code est facile à comprendre.

Vous pouvez voir comment l'auteur a choisi de résoudre un grand nombre d'événements tactiles courants:

tenir, appuyez sur, doubletap, faites glisser, dragstart, dragend, dragup, dragdown, dragleft, dragright, glisser, swip up, swipedown, swipightef, swiperight, transformer, transformer, commencer, transformer, faire pivoter, pincer, pinchin, pincer, pincer, pincer, pincer, pincer , relâche (la détection de geste se termine)

Je pense qu'après avoir lu le code source, vous comprendrez beaucoup mieux comment fonctionnent les événements tactiles et comment identifier les événements que le navigateur est capable de gérer.

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

Answer 2

Il existe une excellente ressource https://patrickhlauke.github.io/touch/tests/results/ qui détaille l'ordre des événements sur un nombre impressionnant de navigateurs. Il semble également être mis à jour régulièrement (en septembre 2016, sa dernière mise à jour était août 2016).

Le résumé est, essentiellement tout ce qui déclenche mouseover et les événements connexes; la plupart déclenchent également des événements tactiles, qui généralement complète (atteint touchend) avant mouseover, puis continue vers click (sauf modification de la page le contenu annule cela). Ces exceptions maladroites sont heureusement relativement rares (3ème partie Android navigateurs et blackberry playbook).

Cette ressource liée offre un niveau de détail impressionnant. Voici un exemple des trois premiers tests sur les nombreux systèmes d'exploitation, périphériques et navigateurs:

Pour résumer certains des points clés:

Navigateurs mobiles

• Tous les navigateurs répertoriés déclenchent mouseover au premier toucher. Seuls certains navigateurs Windows Phone le déclenchent une seconde fois.
• Tous déclenchent click. Il ne spécifie pas quelle annulation click si mouseover change la page (je pense que la plupart le font)
• La plupart des navigateurs déclenchent mouseover après touchstart et touchend. Ceci inclut iOS7.1 Safari, Android, Chrome, Opera et Firefox pour Android, et certains (pas tous les navigateurs de téléphone Windows)
• Plusieurs navigateurs Windows Phone (tous Windows 8/8.1 et une version pour 10) et plusieurs Android (Dolphin, Maxathon, UC) tiers) déclenchent mouseover aprèstouchstart et touchend.
• Seul le Blackberry Playbook déclenche mouseover entre touchstart et touchend
• Seulement Opera Mini et Puffin (3ème partie = Android)) ne possèdent pas touchstart ou touchend.

Navigateurs de bureau

• Des versions raisonnablement à jour du bureau Chrome et Opera se comportent comme leurs homologues mobiles, touchstart et touchend suivies de mouseover.
• Les navigateurs Firefox et Microsoft (IE <= 11 et de nombreuses versions d’Edge) ne déclenchent pas d’événements touchstart et touchend.
• Aucune donnée sur les Mac, mais vraisemblablement aucun navigateur Ma ne prend en charge touchstart et touchend, étant donné la rareté des interfaces tactiles Mac.

Il existe également une quantité incroyable de données sur les navigateurs, associée aux technologies d'assistance.

Answer 3

Voici ma dernière observation sur les événements tactiles et de souris sur Android 4.3

Opera, Firefox et Chrome semblent avoir un comportement standard

1. Sur Swipe (touchstart-touchmove-touchend):

   1. Aucun événement de souris (à l'exception de mouseover) ne se déclenche.
   2. Mouseover ne se déclenche que si touchstart et touchend se produisent sur le même élément. (touchstart-touchmove-touchend-mouseover)
   3. Si default est empêché sur touchstart: le comportement de balayage par défaut ne fonctionne pas. aucun changement ne se produit concernant le déclenchement d'un événement de souris.

2. Au robinet (touchstart-touchend):

   1. Mouseover-mousemove-mousedown-mouseup-click-cliquez sur feu après un délai
   2. Si default est empêché sur touchstart: seul le survol de la souris est déclenché.

le navigateur par défaut Android a des comportements non standard:

1. Mouseover se déclenche avant touchstart, ce qui signifie que la souris se déclenche toujours.
2. Tous les événements de souris se déclenchent sur Tap, même si la valeur par défaut est empêchée sur touchstart.

Answer 4

Oui, vous pouvez démarrer une minuterie à touchstart et la terminer par touchend et faire votre choix à partir de là.

Aussi vous pouvez faire ... disons, glisser, mon déclenchement touchmove vous pouvez obtenir les coordonnées du "doigt" et voir combien j'ai voyagé avant que touchend ne se déclenche.

Je ne sais pas s'il existe un moyen plus simple d'utiliser une bibliothèque d'événements tactiles, mais je suppose que vous pourriez en écrire un pour les événements simples 'tap', 'double tap', 'glisser' assez facilement.