js移動端滑動事件

標籤：自訂   star   func   第一個   return   box   false   觸摸位置   系統   

 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.PI27             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>

 

js移動端滑動事件