1 <div id="box" style="width:100%;height:100%;border:1px solid red;"></div> 23<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>
