Afin de fournir une prise en charge solide des interfaces tactiles, les événements tactiles offrent la possibilité de répondre aux opérations de l'utilisateur sur l'écran tactile ou le pavé tactile.
interface TouchEvénementTouchEvent est un type d'événement qui décrit les changements d'état des doigts sur la surface tactile (écran tactile, pavé tactile, etc.). Ce type d'événement est utilisé pour décrire un ou plusieurs points de contact, permettant aux développeurs de détecter le mouvement des points de contact, l'augmentation et la diminution des points de contact, etc. Chaque objet Touch représente un point tactile ; chaque point tactile est décrit par sa position, sa taille, sa forme, son niveau de pression et son élément cible. Un objet TouchList représente une liste de plusieurs points de contact.
Type d'événement tactilePour distinguer les changements d’état liés au toucher, il existe plusieurs types d’événements tactiles. Vous pouvez déterminer le type de l'événement en cours en vérifiant la propriété TouchEvent.type de l'événement tactile.
Le principe de base est d'enregistrer les positions des coordonnées du glissement de début (touchStart) et du glissement de fin (touchEnd), puis de calculer la position relative.
touchStart:function(e){ startX = e.touches[0].pageX; startY = e.touches[0].pageY; e = e || ceci ; endX = e.changedTouches[0].pageX ; endY = e.changedTouches[0].pageY ; that.upOrDown(startX,startY,endX,endY);},upOrDown:function (startX, startY, endX, endY) { const that = this; let direction = that.GetSlideDirection(startX, startY, endX, endY switch); (direction) { cas 0 : console.log (pas de glissement) ; cas 1 : console.log (up) cas 2 : console.log (break) ; 3 : console.log(left); break; cas 4 : console.log(right); default : break;//Direction de retour 1 : haut, 2 : bas, 3 selon le point de départ et la fin. point : Gauche, 4 : Droite, 0 : Ne glisse pas GetSlideDirection:function (startX, startY, endX, endY) { const that = this; let dy = startY - endY; 0; //Si la distance de glissement est trop courte if(Math.abs(dx) < 2 && Math.abs(dy) < 2) { return result; } let angle = that.GetSlideAngle(dx, dy); angle > = -45 && angle < 45) { résultat = 4; sinon si (angle >= 45 && angle < 135) { résultat = 1} sinon si (angle >= -135 && angle < -45) { résultat = 2; } sinon if ((angle >= 135 && angle <= 180) || (angle >= -180 && angle < -135)) { résultat = 3; result; }, //Renvoie l'angle GetSlideAngle:function (dx, dy) { return Math.atan2(dy, dx) * 180 / Math.PI; Méthode JS nativeEn plus des nouvelles méthodes de H5, vous pouvez également utiliser JS natif pour déterminer la direction de glissement de la vue. Le code est le suivant (peut être exécuté directement) :
Il convient de noter que Chrome a toujours défini document.body.scrollTop sur 0 et doit être remplacé par document.documentElement.scrollTop.
<!DOCTYPE html><html><head> <meta charset=utf-8> <title> VeVb武林网(vevb.com)</title> <style> div { border: 1px solid black width: 200px height; : 100px; overflow: scroll; } </style></head><body style=overflow: scroll><h1>HBonjour mot</h1><h1>HBonjour mot</h1><h1>HBonjour mot</h1><h1>HBonjour mot</h1><h1>HBonjour mot</h1><h1>HBonjour mot</h1> <h1>HBonjour mot</h1><h1>HBonjour mot</h1><h1>HBonjour mot</h1><h1>HBonjour mot</h1><h1>HBonjour mot</h1><h1>HBonjour mot</h1><h1>HBonjour mot</h1><h1>HBonjour mot</h1><h1>HBonjour mot</h1> <h1>HBonjour mot</h1><h1>HBonjour mot</h1><h1>HBonjour mot</h1><h1>HBonjour mot</h1><h1>HBonjour mot</h1><h1>HBonjour mot</h1><h1>HBonjour mot</h1><h1>HBonjour mot</h1><h1>HBonjour mot</h1> <h1>HBonjour mot</h1><h1>HBonjour mot</h1><h1>HBonjour mot</h1><h1>HBonjour mot</h1><h1>HBonjour mot</h1><h1>HBonjour mot</h1><h1>HBonjour mot</h1><h1>HBonjour mot</h1><h1>HBonjour mot</h1> <h1>HBonjour mot</h1><h1>HBonjour mot</h1><h1>HBonjour mot</h1><h1>HBonjour mot</h1><h1>HBonjour mot</h1><h1>HBonjour mot</h1><h1>HBonjour mot</h1><h1>HBonjour mot</h1><h1>HBonjour mot</h1> <h1>HBonjour mot</h1><h1>HBonjour mot</h1><h1>HBonjour mot</h1><h1>HBonjour mot</h1><script> fonction scroll( fn ) { var beforeScrollTop = document.documentElement.scrollTop, fn = fn || function() {}; console.log('beforeScrollTop',beforeScrollTop); window.addEventListener(scroll, function() { var afterScrollTop = document); .documentElement.scrollTop, delta = afterScrollTop - beforeScrollTop ; console.log('beforeScrollTop',beforeScrollTop); console.log('afterScrollTop',afterScrollTop); if( delta === 0 ) return false; false); } scroll(function(direction) { console.log(direction) });</script></body></html>Ce qui précède représente l’intégralité du contenu de cet article. J’espère qu’il sera utile à l’étude de chacun. J’espère également que tout le monde soutiendra le réseau VeVb Wulin.