js判断手指滑动（判断手机上下左右屏幕滑动事件）

sheep

js判断手指滑动方向（移动端），判断手机屏幕上手指的上滑、下滑、左滑、右滑操作并提示

方法1：

1. var startx, starty;
   
2.     //获得角度
   
3.     function getAngle(angx, angy) {
   
4.         return Math.atan2(angy, angx) * 180 / Math.PI;
   
5.     };
   
6. 
   
7.     //根据起点终点返回方向 1向上 2向下 3向左 4向右 0未滑动
   
8.     function getDirection(startx, starty, endx, endy) {
   
9.         var angx = endx - startx;
   
10.         var angy = endy - starty;
    
11.         var result = 0;
    
12. 
    
13.         //如果滑动距离太短
    
14.         if (Math.abs(angx) < 2 && Math.abs(angy) < 2) {
    
15.             return result;
    
16.         }
    
17. 
    
18.         var angle = getAngle(angx, angy);
    
19.         if (angle >= -135 && angle <= -45) {
    
20.             result = 1;
    
21.         } else if (angle > 45 && angle < 135) {
    
22.             result = 2;
    
23.         } else if ((angle >= 135 && angle <= 180) || (angle >= -180 && angle < -135)) {
    
24.             result = 3;
    
25.         } else if (angle >= -45 && angle <= 45) {
    
26.             result = 4;
    
27.         }
    
28. 
    
29.         return result;
    
30.     }
    
31.     //手指接触屏幕
    
32.     document.addEventListener("touchstart", function(e) {
    
33.         startx = e.touches[0].pageX;
    
34.         starty = e.touches[0].pageY;
    
35.     }, false);
    
36.     //手指离开屏幕
    
37.     document.addEventListener("touchend", function(e) {
    
38.         var endx, endy;
    
39.         endx = e.changedTouches[0].pageX;
    
40.         endy = e.changedTouches[0].pageY;
    
41.         var direction = getDirection(startx, starty, endx, endy);
    
42.         switch (direction) {
    
43.             case 0:
    
44.                 alert("未滑动！");
    
45.                 break;
    
46.             case 1:
    
47.                 alert("向上！")
    
48.                 break;
    
49.             case 2:
    
50.                 alert("向下！")
    
51.                 break;
    
52.             case 3:
    
53.                 alert("向左！")
    
54.                 break;
    
55.             case 4:
    
56.                 alert("向右！")
    
57.                 break;
    
58.             default:
    
59.         }
    
60.     }, false);
    

复制代码

1.     $("body").on("touchstart", function(e) {
   
2. 　　　　e.preventDefault();
   
3. 　　　　startX = e.originalEvent.changedTouches[0].pageX,
   
4. 　　　　startY = e.originalEvent.changedTouches[0].pageY;
   
5. 　　});
   
6. 　　$("body").on("touchmove", function(e) {
   
7. 　　　　e.preventDefault();
   
8. 　　　　moveEndX = e.originalEvent.changedTouches[0].pageX,
   
9. 　　　　moveEndY = e.originalEvent.changedTouches[0].pageY,
   
10. 　　　　X = moveEndX - startX,
    
11. 　　　　Y = moveEndY - startY;
    
12. 　　　　if ( X > 0 ) {
    
13. 　　　　    //右滑
    
14. 　　　　　　alert("left 2 right");
    
15. 　　　　}
    
16. 　　　　else if ( X < 0 ) {
    
17. 　　　　    //左滑
    
18. 　　　　　　alert("right 2 left");
    
19. 　　　　}
    
20. 　　　　else if ( Y > 0) {
    
21. 　　　　    //下滑
    
22. 　　　　　　alert("top 2 bottom");
    
23. 　　　　}
    
24. 　　　　else if ( Y < 0 ) {
    
25. 　　　　    //上滑
    
26. 　　　　　　alert("bottom 2 top");
    
27. 　　　　}
    
28. 　　　　else{
    
29. 　　　　　　alert("just touch");
    
30. 　　　　}
    
31. 　　　});

复制代码