touchstart、touchend事件判斷手勢滑動方向

//data中進行定義 startX：null, startY:null,//mounted生命周期中進行監聽 document.addEventListener("touchstart",(ev) => {this.startX = ev.touches[0].pageX;this.startY = ev.touches[0].pageY;console.log(this.startX, this.startY, "start");},false ); document.addEventListener("touchend",(ev) => {var endX, endY;endX = ev.changedTouches[0].pageX;endY = ev.changedTouches[0].pageY;var dy = endY - this.startY;var dx = endX - this.startX;console.log(dy, dx, "dy dx");var result = 0;//如果滑動距離太短if (Math.abs(dx) < 2 && Math.abs(dy) < 2) {return result;}var angle = (Math.atan2(dy, dx) * 180) / Math.PI;console.log(angle, 5555555);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;}switch (result) {case 0:console.log("沒滑動");break;case 2:console.log("向上");break;case 1:console.log("向下");break;case 3:console.log("向左");break;case 4:console.log("向右");break;default:}},false );

總結

以上是生活随笔為你收集整理的H5中判断手势滑动方向的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。