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>

js移動端左右滑動事件