Explication détaillée des événements tactiles dans les terminaux mobiles

Cet article vous apporte une explication détaillée des événements tactiles sur le terminal mobile. Il a une certaine valeur de référence. Les amis dans le besoin peuvent s'y référer. J'espère qu'il vous sera utile.

1.touchstart

est déclenché lorsqu'un doigt touche l'écran. L'événement

dom.addEventListener('touchstart',function(e){});
startX=e.touches[0].clientX;

renvoie un objet e qui contient des propriétés spécifiques au mobile : <🎜. > tarchTouches : Toutes les touches actuelles sur l'élément cible
changéTouches : Toutes les touches sur les dernières modifications sur la page
touches : Toutes les touches sur la page

2. votre doigt glisse sur l'écran L'objet

renvoyé par le déclenchement continu de l'événement

contient des attributs spécifiques au mobile :

dom.addEventListener('touchmove',function(e){});

tarchTouches : toutes les touches actuelles de l'élément cible

changesTouches : tous les dernières touches modifiées sur la pagee touches : Toutes les touches sur la page

3.touchend

se déclenche lorsque le doigt quitte l'écran du terminal mobile contenu dans le

. objet renvoyé par l'événement

Propriétés uniques :

dom.addEventListener('touchend',funciton(e){});
//在touchend中，touches拿不到touch对象，
//因为触摸已经结束，changedTouches中拿到触摸对象
//console.log(e);
//endX=e.touches[0];  undefined 
endX=e.changedTouches[0].clientX;

changesTouches : toutes les dernières touches modifiées sur la page

touchcancel : déclenché lorsque le système arrête de suivre les touches. (Peu utilisé) e
Dans l'événement touchend, la notification d'événement enregistre changeTouches

4 e.touches[0]

clientX : la cible tactile est The X. coordonner dans la fenêtre.

clientY : La coordonnée Y de la cible tactile dans la fenêtre.

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.

Recommandations associées :

Explication détaillée des événements tactiles dans le développement mobile javascript_compétences javascript

Exemple d'encapsulation de développement Web sur appareil mobile javascript de compétences tactiles event_javascript

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!