JS判断手势方向

1、滑动屏幕事件使用Html5 的touchstart滑动开始事件和touchend滑动结束事件。

2、方向的判断，以起点做平面坐标系，与终点连线做直线，直线与x正半轴计算角度；我们以45度角为方向分割线，如：只要滑动角度大于等于45度且小于135度，则判断它方向为向上滑。

3、使用Math.atan2来计算起点与终点形成的直线角度。

4、仔细对比标准坐标系与屏幕坐标系，我们发现，标准坐标系，上半轴为负值，要实现转换，只需要调换Y坐标起点与终于位置即可。

 

1. <script>  
2.   
3.           //返回角度  
4.           function GetSlideAngle(dx, dy) {  
5.               returnMath.atan2(dy, dx) * 180 / Math.PI;  
6.           }  
7.    
8.           //根据起点和终点返回方向 1：向上，2：向下，3：向左，4：向右,0：未滑动  
9.           function GetSlideDirection(startX, startY, endX, endY) {  
10.               var dy = startY - endY;  
11.               var dx = endX - startX;  
12.               varresult = 0;  
13.    
14.               //如果滑动距离太短  
15.               if(Math.abs(dx) < 2 && Math.abs(dy) < 2) {  
16.                   returnresult;  
17.               }  
18.    
19.               varangle = GetSlideAngle(dx, dy);  
20.               if(angle >= -45 && angle < 45) {  
21.                   result = 4;  
22.               }else if (angle >= 45 && angle < 135) {  
23.                   result = 1;  
24.               }else if (angle >= -135 && angle < -45) {  
25.                   result = 2;  
26.               }  
27.               else if ((angle >= 135 && angle <= 180) || (angle >= -180 && angle < -135)) {  
28.                   result = 3;  
29.               }  
30.    
31.               returnresult;  
32.           }  
33.    
34.           //滑动处理  
35.           var startX, startY;  
36.           document.addEventListener('touchstart',function (ev) {  
37.               startX = ev.touches[0].pageX;  
38.               startY = ev.touches[0].pageY;    
39.           }, false);  
40.           document.addEventListener('touchend',function (ev) {  
41.               var endX, endY;  
42.               endX = ev.changedTouches[0].pageX;  
43.               endY = ev.changedTouches[0].pageY;  
44.               var direction = GetSlideDirection(startX, startY, endX, endY);  
45.               switch(direction) {  
46.                   case 0:  
47.                       alert("没滑动");  
48.                       break;  
49.                   case 1:  
50.                       alert("向上");  
51.                       break;  
52.                   case 2:  
53.                       alert("向下");  
54.                       break;  
55.                   case 3:  
56.                       alert("向左");  
57.                       alert("!");  
58.                       break;  
59.                   case 4:  
60.                       alert("向右");  
61.                       break;  
62.                   default:             
63.               }  
64.           }, false);  
65.      
66.             
67.       </script>  

转载于:https://my.oschina.net/u/2962717/blog/796602