Heim >Web-Frontend >CSS-Tutorial >So bestimmen Sie die Gleitrichtung des Benutzers in H5-Touch-Ereignissen
So bestimmen Sie die Gleitrichtung des Benutzers in H5-Touch-Ereignissen
- php中世界最好的语言Original
- 2018-06-13 14:37:043425Durchsuche
Dieses Mal zeige ich Ihnen, wie Sie die Gleitrichtung des Benutzers bei H5-Berührungsereignissen bestimmen. Welche Vorsichtsmaßnahmen gibt es, um die Gleitrichtung des Benutzers bei H5-Berührungsereignissen zu bestimmen?
Schnittstelle
TouchEvent
TouchEvent ist ein Typ, der die Bewegung eines Fingers beschreibt Zustandsänderungsereignisse einer Touch-Oberfläche (Touchscreen, Touchpad usw.). 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. Das TouchList-Objekt stellt eine Liste mehrerer Berührungspunkte dar.
Typen von Berührungsereignissen
Um berührungsbezogene Zustandsänderungen zu unterscheiden, gibt es sind viele Arten von Berührungsereignissen. Sie können feststellen, um welchen Typ es sich bei dem aktuellen Ereignis handelt, indem Sie die TouchEvent.type-Eigenschaft des Berührungsereignisses überprüfen.
touchstart: Wird ausgelöst, wenn der Benutzer einen Berührungspunkt auf der Berührungsoberfläche platziert.
Touchend: Wird ausgelöst, wenn ein Berührungspunkt vom Benutzer von der Touchoberfläche entfernt wird (wenn der Benutzer einen Finger von der Touchoberfläche abhebt).
touchmove: Wird ausgelöst, wenn der Benutzer einen Berührungspunkt auf der Berührungsebene bewegt.
touchcancel: Wird ausgelöst, wenn der Kontakt aus irgendeinem Grund unterbrochen wird.
Gleitrichtung bestimmen
Das Grundprinzip besteht darin, die Koordinaten des Startgleitens (touchStart) zu erfassen und die Endgleitposition (touchEnd) und führen Sie dann relative Positionsberechnungen durch.
touchStart:function(e){
startX = e.touches[0].pageX;
startY = e.touches[0].pageY;
e = e || window.event;
},
touchEnd:function(e){
const that = 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);
switch(direction) {
case 0:
console.log("没滑动");
break;
case 1:
console.log("向上");
break;
case 2:
console.log("向下");
break;
case 3:
console.log("向左");
break;
case 4:
console.log("向右");
break;
default:
break;
}
},
//根据起点和终点返回方向 1：向上，2：向下，3：向左，4：向右,0：未滑动
GetSlideDirection:function (startX, startY, endX, endY) {
const that = this;
let dy = startY - endY;
let dx = endX - startX;
let result = 0;
//如果滑动距离太短
if(Math.abs(dx) < 2 && Math.abs(dy) < 2) {
return result;
}
let angle = that.GetSlideAngle(dx, dy);
if(angle >= -45 && angle < 45) {
result = 4;
}else if (angle >= 45 && angle < 135) {
result = 1;
}else if (angle >= -135 && angle < -45) {
result = 2;
}
else if ((angle >= 135 && angle <= 180) || (angle >= -180 && angle < -135)) {
result = 3;
}
return result;
},
//返回角度
GetSlideAngle:function (dx, dy) {
return Math.atan2(dy, dx) * 180 / Math.PI;
}Native JS-Methode
Zusätzlich zu den neuen Methoden in H5 können Sie auch native JS verwenden, um die Gleitrichtung des zu bestimmen Ansicht. Der Code lautet wie folgt (Kann direkt ausgeführt werden):
Es ist zu beachten, dass document.body.scrollTop von Chrome immer 0 ist und in document.documentElement.scrollTop geändert werden muss
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title> 脚本之家(jb51.net)</title>
<style>
p {
border: 1px solid black;
width: 200px;
height: 100px;
overflow: scroll;
}
</style>
</head>
<body style="overflow: scroll">
<h1>HEllo word</h1>
<h1>HEllo word</h1>
<h1>HEllo word</h1>
<h1>HEllo word</h1>
<h1>HEllo word</h1>
<h1>HEllo word</h1>
<h1>HEllo word</h1>
<h1>HEllo word</h1>
<h1>HEllo word</h1>
<h1>HEllo word</h1>
<h1>HEllo word</h1>
<h1>HEllo word</h1>
<h1>HEllo word</h1>
<h1>HEllo word</h1>
<h1>HEllo word</h1>
<h1>HEllo word</h1>
<h1>HEllo word</h1>
<h1>HEllo word</h1>
<h1>HEllo word</h1>
<h1>HEllo word</h1>
<h1>HEllo word</h1>
<h1>HEllo word</h1>
<h1>HEllo word</h1>
<h1>HEllo word</h1>
<h1>HEllo word</h1>
<h1>HEllo word</h1>
<h1>HEllo word</h1>
<h1>HEllo word</h1>
<h1>HEllo word</h1>
<h1>HEllo word</h1>
<h1>HEllo word</h1>
<h1>HEllo word</h1>
<h1>HEllo word</h1>
<h1>HEllo word</h1>
<h1>HEllo word</h1>
<h1>HEllo word</h1>
<h1>HEllo word</h1>
<h1>HEllo word</h1>
<h1>HEllo word</h1>
<h1>HEllo word</h1>
<h1>HEllo word</h1>
<h1>HEllo word</h1>
<h1>HEllo word</h1>
<h1>HEllo word</h1>
<h1>HEllo word</h1>
<h1>HEllo word</h1>
<script>
function 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;
fn( delta > 0 ? "down" : "up" );
beforeScrollTop = afterScrollTop;
}, false);
}
scroll(function(direction) { console.log(direction) });
</script>
</body>
</html>
Ich glaube, Sie haben die Methode in diesem Artikel gemeistert. Weitere spannende Informationen finden Sie in anderen verwandten Artikeln auf der chinesischen PHP-Website!
Empfohlene Lektüre:
So überprüfen Sie das E-Mail-Adressformat
Tipps zur Verwendung von CSS-Floats
Das obige ist der detaillierte Inhalt vonSo bestimmen Sie die Gleitrichtung des Benutzers in H5-Touch-Ereignissen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!