Cet article présente principalement la compilation d'événements tactiles communs développés par le terminal mobile HTML5. Les objets d'événement des événements tactiles correspondent essentiellement aux attributs de l'opération de souris. Les amis qui en ont besoin peuvent y faire référence.
De nombreux nouveaux événements ont été ajoutés à HTML5, mais parce que leurs problèmes de compatibilité ne sont pas idéaux et que leur application n'est pas très pratique, ils sont essentiellement omis ici. Nous partageons uniquement des événements avec une bonne compatibilité avec de larges applications. Nous les ajouterons et les partagerons les uns après les autres à mesure que la situation de compatibilité s'améliore à l'avenir. Les événements que je vous présenterai aujourd'hui sont principalement des événements tactiles: Touchstart, TouchMove et Touchend.
Au début, Touch Events Touchstart, TouchMove et Touchend sont des événements nouvellement ajoutés pour la version iOS de Safari Browser pour transmettre des informations aux développeurs. Parce que l'appareil iOS n'a ni souris ni clavier, lors du développement de pages Web interactives pour les navigateurs de safari mobile, des événements de souris et de clavier sur le PC ne suffisent pas.
Lorsque l'iPhone 3GS a été publié, son propre navigateur de Safari mobile a fourni de nouveaux événements liés aux opérations tactiles. Le même événement a ensuite été mis en œuvre par le navigateur sur Android. Un événement tactile commencera lorsque l'utilisateur mettra son doigt sur l'écran, lorsque vous glissez sur l'écran ou lors de son éloignement de l'écran. Les détails suivants sont expliqués:
Événement Touchstart: déclenché lorsque le doigt touche l'écran, il déclenche même si un doigt est déjà placé sur l'écran.
Événement TouchMove: se déclenche en continu lorsque le doigt glisse sur l'écran. Au cours de cet événement, l'appel de l'événement empêché à perturbation () peut empêcher le défilement.
Événement Touchend: déclenché lorsque le doigt quitte l'écran.
Événement TouchCancel: déclenché lorsque le système cesse de suivre le toucher. Le document ne spécifie pas l'heure de départ exacte de cet événement, nous ne pouvons donc que deviner.
Tous les événements ci-dessus bouillonneront et peuvent être annulés. Bien que ces événements tactiles ne soient pas définis dans la spécification DOM, ils sont implémentés de manière compatible DOM. Par conséquent, chaque objet d'événement d'événement tactile fournit des attributs communs dans la pratique de la souris: Bubbles (le type d'événement de bulles), annule (si l'action par défaut associée à l'événement peut être annulée avec la méthode empêchée dedfault ()), ClientX (renvoie la coordonnée horizontale du pointeur de la souris lorsque l'événement est déclenché) Coordonnée du pointeur de la souris lorsque l'événement est déclenché) et Screeny (renvoie la coordonnée verticale du pointeur de la souris lorsque l'événement est déclenché). En plus des propriétés DOM communes, les événements Touch contiennent également les trois attributs suivants pour le suivi du toucher.
Touche: un tableau d'objets tactiles représentant l'opération tactile actuellement suivie.
TargetTouches: un tableau d'objets tactiles spécifiques à la cible de l'événement.
ChangeTouches: un tableau d'objets tactiles qui représentent ce qui a changé depuis la dernière touche.
Chaque objet Touch contient les propriétés suivantes.
ClientX: touchez la coordonnée X de la cible dans la fenêtre.
Clienty: touchez la coordonnée en y de la cible dans la fenêtre.
Identifiant: l'ID unique qui identifie le toucher.
Pagex: touchez la coordonnée x de la cible dans la page.
Pagey: touchez la coordonnée en y de la cible dans la page.
ScreenX: Appuyez sur la coordonnée X de la cible à l'écran.
Screeny: Appuyez sur la coordonnée Y de la cible à l'écran.
cible: toucher la cible du nœud DOM.
Chaque point de contact contient les informations tactiles suivantes (couramment utilisées):
Identifiant: une valeur qui identifie de manière unique le doigt actuel dans la session tactile. Généralement, le numéro de flux à partir de 0 (Android4.1, UC)
Target: élément DOM, est la cible ciblée par l'action.
Pagex / Pagex / ClientX / Clienty / ScreenX / Screeny: une valeur, où l'action se produit sur l'écran (la page contient la distance de défilement, le client ne contient pas la distance de défilement, l'écran est basé sur l'écran).
RADIUSX / RADIUSY / ROTATATIONAGNE: Dessinez une ellipse approximativement équivalente à la forme d'un doigt, de deux rayons et de l'angle de rotation de l'ellipse respectivement. Le navigateur de test préliminaire ne le prend pas en charge, mais heureusement, les fonctions ne sont pas couramment utilisées, donc tout le monde est le bienvenu.
Petits exemples d'opérations JavaScript:
JavaScript Code Copier le contenu dans le presse-papiers