Maison  >  Article  >  interface Web  >  La référence réelle de l'événement touch de js

La référence réelle de l'événement touch de js

PHPz
PHPzoriginal
2016-05-16 16:34:111492parcourir

Rechercher l'événement de glissement de l'écran tactile de la page mobile. Rechercher le support technique correspondant de jquery est vraiment fastidieux, alors que js n'a besoin que de quelques étapes simples pour le définir. Permettez-moi de partager avec vous la référence réelle de l'événement tactile. de js.

Lorsque j'ai commencé à travailler sur des pages front-end, je suis entré en contact avec js, mais j'ai ensuite été attiré par le jquery simple et efficace et je l'utilise depuis.

Quant à js, je l'ai subjectivement abandonné comme technologie sous-jacente.

Jusqu'à ces derniers jours de travail, j'étudiais les événements de glissement d'écran tactile sur les pages mobiles. Rechercher le support technique correspondant de jquery est vraiment fastidieux (bien sûr, il se peut que je ne comprenne pas). jquery suffit), alors que js ne nécessite que quelques étapes. Définissez-le simplement.

Comme je connais peu js, j'ai longtemps essayé les applications les plus simples... Laissez-moi vous partager la référence actuelle de l'événement js touch :

$(function(){
document.addEventListener("touchmove", _touch, false);
})

function _touch(event){
alert(1);
}

Le code ci-dessus utilise inévitablement quelque chose de jquery, et ceux qui n'utilisent pas jquery peuvent l'ignorer.

Les événements correspondants sont :

touchstart : déclenché lorsqu'un doigt touche l'écran il sera déclenché même s'il y a déjà un doigt sur l'écran ;
touchmove : déclenché en continu lorsque le doigt glisse sur l'écran. Lors de cet événement, l'appel de PreventDefault() empêche le défilement.
touchend : déclenché lorsque le doigt est retiré de l'écran.
touchcancel : déclenché lorsque le système arrête de suivre les touches. L'événement déclencheur exact de cet événement n'est pas clair dans la documentation.

Les attributs suivants existent sur les objets événement des événements ci-dessus :

touches : un tableau d'objets Touch représentant les opérations tactiles actuellement suivies.
targetTouches : tableau d'objets Touch spécifiques aux cibles d'événement.
changeTouches : un tableau d'objets Touch indiquant ce qui a changé depuis le dernier contact.

Chaque objet Touch contient les propriétés suivantes :

clientX : La coordonnée X de la cible tactile dans la fenêtre.
clientY : La coordonnée Y de la cible tactile dans la fenêtre.
identifiant : représente l'identifiant unique du toucher.
pageX : La coordonnée x de la cible tactile dans la page.
pageY : La coordonnée y de la cible tactile dans la page.
screenX : La coordonnée x de la cible tactile sur l'écran.
screenY : La coordonnée y de la cible tactile sur l'écran.
cible : coordonnées du nœud DOM touché

Ce qui précède représente l'intégralité du contenu de ce chapitre. Pour plus de didacticiels connexes, veuillez visiter le Tutoriel vidéo JavaScript !

Déclaration:
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn