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>
