js移动端左右滑动事件

最新推荐文章于 2024-11-23 15:32:37 发布

转载最新推荐文章于 2024-11-23 15:32:37 发布 · 2.8k 阅读

本内容遵循CC 4.0 BY-SA版权协议

原文链接：http://www.cnblogs.com/webwrangler/p/8920387.html

本文介绍了一种使用JavaScript监听触摸事件并判断滑动方向的方法。通过在div元素上添加touchstart、touchmove和touchend事件监听器，可以捕捉用户在触屏设备上的滑动操作，并根据起始和结束坐标确定滑动方向，实现右滑或左滑的响应。

 1 <div id="box" style="width:100%;height:100%;border:1px solid red;"></div>
 2     
 3     <script>
 4         //定义变量，用于记录坐标和角度
 5         var startx,movex,endx,nx;
 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             }else if(event.type=="touchmove"){//触摸中的坐标获取
15                 console.log('滑动中');
16                 var touch = event.touches[0];
17                 movex = Math.floor(touch.pageX);
18             }else if(event.type == "touchend" || event.type == "touchcancel"){//当手指离开屏幕或系统取消触摸事件的时候
19                 endx = Math.floor(event.changedTouches[0].pageX);//获取最后的坐标位置
20                 console.log('结束');
21                 nx = endx-startx;//获取开始位置和离开位置的距离
22                 //判断滑动方向
23                 if(nx > 0){
24                     alert('右滑动');
25                     return false;
26                 }else{
27                     alert('左滑动');
28                     return false;
29                 }
30             }
31         }
32         //添加触摸事件的监听，并直行自定义触摸函数
33         box.addEventListener('touchstart',touchs,false);
34         box.addEventListener('touchmove',touchs,false);
35         box.addEventListener('touchend',touchs,false);
36     </script>