Um Touch-Schnittstellen umfassend zu unterstützen, bieten Touch-Ereignisse die Möglichkeit, auf Benutzervorgänge auf dem Touchscreen oder Touchpad zu reagieren.
Schnittstelle TouchEventTouchEvent ist ein Ereignistyp, der die Zustandsänderungen von Fingern auf der Touch-Oberfläche (Touchscreen, Touchpad usw.) beschreibt. Diese Art von Ereignis wird verwendet, um einen oder mehrere Berührungspunkte zu beschreiben, sodass Entwickler die Bewegung von Berührungspunkten, die Zunahme und Abnahme von Berührungspunkten usw. erkennen können. Jedes Touch-Objekt stellt einen Berührungspunkt dar; jeder Berührungspunkt wird durch seine Position, Größe, Form, Druckstufe und Zielelement beschrieben. Ein TouchList-Objekt stellt eine Liste mehrerer Berührungspunkte dar.
Art des BerührungsereignissesUm zwischen berührungsbedingten Zustandsänderungen zu unterscheiden, gibt es mehrere Arten von Berührungsereignissen. Sie können feststellen, um welchen Typ es sich bei dem aktuellen Ereignis handelt, indem Sie die Eigenschaft „TouchEvent.type“ des Berührungsereignisses überprüfen.
Das Grundprinzip besteht darin, die Koordinatenpositionen des Startgleitens (touchStart) und des Endgleitens (touchEnd) aufzuzeichnen und dann die relative Position zu berechnen.
touchStart:function(e){ startX = e.touches[0].pageX; startY = e.touches[0].pageY; this; 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); (Richtung) { case 0: console.log (keine gleitende Pause); case 1: console.log (down); 3: console.log(left); case 4: console.log(right); //Rückgaberichtung 1: up, 2: down, 3 entsprechend dem Startpunkt und dem Ende Punkt: Links, 4: Rechts, 0: Nicht gleitend GetSlideDirection:function (startX, startY, endX, endY) { const that = let dy = startY - endY; let dx = endX - startX; 0; //Wenn die Gleitstrecke zu kurz ist if(Math.abs(dx) < 2 && Math.abs(dy) < 2) { return result } let angle = that.GetSlideAngle(dx, dy); Winkel > = -45 && Winkel < 45) { Ergebnis = 4; }else if (Winkel >= 45 && Winkel < 135) { Ergebnis = 1; -135 && angle < -45) { result = 2; } else if ((angle >= 135 && angle <= 180) || (angle >= -180 && angle < -135)) { result = 3; result; }, //Den Winkel zurückgeben GetSlideAngle:function (dx, dy) { return Math.atan2(dy, dx) * 180 / Math.PI } Native JS-MethodeZusätzlich zu den neuen Methoden in H5 können Sie auch natives JS verwenden, um die Gleitrichtung der Ansicht zu bestimmen. Der Code lautet wie folgt (kann direkt ausgeführt werden):
Es ist zu beachten, dass Chrome document.body.scrollTop immer auf 0 gesetzt hat und in document.documentElement.scrollTop geändert werden muss.
<!DOCTYPE html><html><head> <meta charset=utf-8> <title> VeVb武林网(vevb.com)</title> <style> div { border: 1px solid black; width: 200px; : 100px; overflow: scroll; } </style></head><body style=overflow: scroll><h1>Hallo Wort</h1><h1>Hallo Wort</h1><h1>Hallo Wort</h1><h1>Hallo Wort</h1><h1>Hallo Wort</h1><h1>Hallo Wort</h1> <h1>Hallo Wort</h1><h1>Hallo Wort</h1><h1>Hallo Wort</h1><h1>Hallo Wort</h1><h1>Hallo Wort</h1><h1>Hallo Wort</h1><h1>Hallo Wort</h1><h1>Hallo Wort</h1><h1>Hallo Wort</h1> <h1>Hallo Wort</h1><h1>Hallo Wort</h1><h1>Hallo Wort</h1><h1>Hallo Wort</h1><h1>Hallo Wort</h1><h1>Hallo Wort</h1><h1>Hallo Wort</h1><h1>Hallo Wort</h1><h1>Hallo Wort</h1> <h1>Hallo Wort</h1><h1>Hallo Wort</h1><h1>Hallo Wort</h1><h1>Hallo Wort</h1><h1>Hallo Wort</h1><h1>Hallo Wort</h1><h1>Hallo Wort</h1><h1>Hallo Wort</h1><h1>Hallo Wort</h1> <h1>Hallo Wort</h1><h1>Hallo Wort</h1><h1>Hallo Wort</h1><h1>Hallo Wort</h1><h1>Hallo Wort</h1><h1>Hallo Wort</h1><h1>Hallo Wort</h1><h1>Hallo Wort</h1><h1>Hallo Wort</h1> <h1>Hallo Wort</h1><h1>Hallo Wort</h1><h1>Hallo Wort</h1><h1>Hallo Wort</h1><script>-Funktion scroll( fn ) { var beforeScrollTop = document.documentElement.scrollTop, fn = fn ||. function() {}; window.addEventListener(scroll, function() { var afterScrollTop = document .documentElement.scrollTop, delta = afterScrollTop - beforeScrollTop; console.log('beforeScrollTop',beforeScrollTop); if( delta === 0 ) return false; beforeScrollTop = afterScrollTop }, false); } scroll(function(direction) { console.log(direction) });</script></body></html>Das Obige ist der gesamte Inhalt dieses Artikels. Ich hoffe, dass er für das Studium aller hilfreich ist. Ich hoffe auch, dass jeder das VeVb Wulin Network unterstützt.