js移动端滑动事件

Posted 2020-11-01 webwrangler

 1 <div id="box" style="width:100%;height:100%;border:1px solid red;"></div>
 2 
 3 <script>
 4     //定义变量，用于记录坐标和角度
 5     var startx,starty,movex,movey,endx,endy,nx,ny,angle;
 6     //开始触摸函数，event为触摸对象
 7     function touchs(event){
 8         event.preventDefault();//阻止浏览器默认滚动事件
 9         var box = document.getElementById(‘box‘);//获取DOM标签
10         if(event.type=="touchstart"){//通过if语句判断event.type执行了哪个触摸事件
11             console.log(‘开始‘);
12             var touch = event.touches[0];//获取开始的位置数组的第一个触摸位置
13             startx = Math.floor(touch.pageX);//获取第一个坐标的X轴
14             starty = Math.floor(touch.pageY);//获取第一个坐标的Y轴
15         }else if(event.type=="touchmove"){//触摸中的坐标获取
16             console.log(‘滑动中‘);
17             var touch = event.touches[0];
18             movex = Math.floor(touch.pageX);
19             movey = Math.floor(touch.pageY);
20         }else if(event.type == "touchend" || event.type == "touchcancel"){//当手指离开屏幕或系统取消触摸事件的时候
21             endx = Math.floor(event.changedTouches[0].pageX);//获取最后的坐标位置
22             endy = Math.floor(event.changedTouches[0].pageY);
23             console.log(‘结束‘);
24             nx = endx-startx;//获取开始位置和离开位置的距离
25             ny = endy-starty;
26             //通过坐标计算角度公式 Math.atan2(y,x)*180/Math.PI
27             angle = Math.atan2(ny, nx) * 180 / Math.PI;
28             if(Math.abs(nx)<=1 ||Math.abs(ny)<=1){
29                 return false;
30                 console.log(‘滑动距离太小‘);
31             }
32             //通过滑动的角度判断触摸的方向
33             if(angle<45 && angle>=-45){
34                 alert(‘右滑动‘);
35                 return false;
36             }else if(angle<135 && angle>=45){
37                 alert(‘下滑动‘);
38                 return false;
39             }else if((angle<=180 && angle>=135) || (angle>=-180 && angle<-135 )){
40                 alert(‘左滑动‘);
41                 return false;
42             }else if(angle<=-45 && angle >=-135){
43                 alert(‘上滑动‘);
44                 return false;
45             }
46         }
47     }
48     
49     //添加触摸事件的监听，并直行自定义触摸函数
50     box.addEventListener(‘touchstart‘,touchs,false);
51     box.addEventListener(‘touchmove‘,touchs,false);
52     box.addEventListener(‘touchend‘,touchs,false);
53     
54 </script>