Gérer à la fois événement tactile et événement de la souris

Les interfaces touch permettent aux applications de créer de meilleures expériences utilisateurs sur les appareils tactiles. Pourtant, la grande majorité du contenu web actuel est développé pour fonctionner uniquement avec la souris. En conséquence, même si un navigateur supporte le tactile, le navigateur continue à émuler les événements de la souris, donc le contenu qui se veut fonctionner uniquement à la souris fonctionnera toujours tel quel sans modification directe.

Idéalement, une application tactile n'a pas besoin de supporter explicitement la souris. Mais puisque le navigateur doit émuler les événements de la souris, il peut être nécessaire de gérer certains problèmes d'interaction. Ci-dessous, vous trouverez des détails concernant l'interaction et ses répercussions pour les développeurs d'application.

Déclenchement de l'événement

La norme des événements tactiles définit quelques exigences envers les navigateurs concernant l'interaction tactile et souris (voir la section Interaction with Mouse Events and click pour plus de détails), noter que le navigateur peut déclencher à la fois des événements tactiles et des événements de la souris en réponse à une seule et même entrée de l'utilisateur. Cette section décrit les exigences pouvant affecter une application.

Si le navigateur déclenche à la fois des événements tactiles et souris en réponse à une seule entrée d'un utilisateur, le navigateur doit déclencher un événement touchstart avant tout événement de la souris. En conséquence, si une application ne veut pas que des événements de la souris soient déclenchés sur un élément target spécifiquement tactile, le gestionnaire de l'événement tactile de l'élément devrait appeler preventDefault() ainsi aucun événement additionnel de la souris sera envoyé.

Voici un extrait de code du gestionnaire de l'événement touchmove qui appelle preventDefault().

// touchmove handler
function process_touchmove(ev) {
  // Call preventDefault() to prevent any further handling
  ev.preventDefault();
}

Ordre des événements

Même si l'ordre spécifique des événements tactiles et souris est défini par l'implémentation, la norme indique que l'ordre suivant est représentatif: pour une entrée :

  • touchstart
  • Zero ou plus d'événements touchmove, suivant le mouvement de(s) doigt(s)
  • touchend
  • mousemove
  • mousedown
  • mouseup
  • click

Si l'événement touchstart, touchmove ou touchend est annulé pendant une interaction, aucun événement de la souris ou du click sera déclenché, et la séquence des événements qui en résulte serait seulement :

  • touchstart
  • Zero ou plus d'événements touchmove, suivant le mouvement de(s) doigt(s)
  • touchend

Community