移動端觸摸滑動原理詳解案例，實現過程通過添加DOM標簽的觸摸事件監聽，並計算觸摸距離，通過距離坐標計算觸摸角度，最后通過觸摸角度去判斷往哪個方向觸摸的。
觸摸的事件列表
觸摸的4個事件：
touchstart 觸摸屏幕上時觸發
touchmove 觸摸屏幕中滑動時觸發
touchend 離開屏幕時觸發
touchcancel 系統取消觸摸事件的時候觸發
監聽觸摸后觸摸事件會實現一個event對象，這個對象里面包括3個觸摸函數列表。
觸摸事件里的3個函數：
touches 屏幕上所有手指列表
targetTouches 在當前DOM標簽上手指的列表
changedTouches 涉及當前事件的手指的列表
觸摸函數的屬性，用於獲取坐標
8個屬性：
clientX 觸摸目標在瀏覽器中的x坐標
clientY 觸摸目標在瀏覽器中的y坐標
identifier 標識觸摸的唯一ID。
pageX 觸摸目標在當前DOM中的x坐標
pageY 觸摸目標在當前DOM中的y坐標
screenX 觸摸目標在屏幕中的x坐標
screenY 觸摸目標在屏幕中的y坐標
target 觸摸的DOM節點目標。
Math.atan2()函數，計算角度的弧度值
angel=Math.atan2(y,x)
x 指定點的 x 坐標
y 指定點的 y 坐標
angel是一個弧度值（可以比喻為直角三角形對角的角，其中 x 是鄰邊邊長，而 y 是對邊邊長）
atan2(x,y)*180/Math.PI 轉換為角度
觸摸詳細代碼：
<html>
<head>
<meta charset="utf-8"/>
<title>touch test</title>
</head>
<body>
<div id="box" style="width:100%;height:100%;border:1px solid red;"></div>
<script>
//定義變量，用於記錄坐標和角度
var startx,starty,movex,movey,endx,endy,nx,ny,angle;
//開始觸摸函數，event為觸摸對象
function touchs(event){
//阻止瀏覽器默認滾動事件
event.preventDefault();
//獲取DOM標簽
var box = document.getElementById('box');
//通過if語句判斷event.type執行了哪個觸摸事件
if(event.type=="touchstart"){
console.log('開始');
//獲取開始的位置數組的第一個觸摸位置
var touch = event.touches[0];
//獲取第一個坐標的X軸
startx = Math.floor(touch.pageX);
//獲取第一個坐標的X軸
starty = Math.floor(touch.pageY);
//觸摸中的坐標獲取
}else if(event.type=="touchmove"){
console.log('滑動中');
var touch = event.touches[0];
movex = Math.floor(touch.pageX);
movey = Math.floor(touch.pageY);
//當手指離開屏幕或系統取消觸摸事件的時候
}else if(event.type == "touchend" || event.type == "touchcancel"){
//獲取最后的坐標位置
endx = Math.floor(event.changedTouches[0].pageX);
endy = Math.floor(event.changedTouches[0].pageY);
console.log('結束');
//獲取開始位置和離開位置的距離
nx = endx-startx;
ny = endy-starty;
//通過坐標計算角度公式 Math.atan2(y,x)*180/Math.PI
angle = Math.atan2(ny, nx) * 180 / Math.PI;
if(Math.abs(nx)<=1 ||Math.abs(ny)<=1){
return false;
console.log('滑動距離太小');
}
//通過滑動的角度判斷觸摸的方向
if(angle<45 && angle>=-45){
alert('右滑動');
return false;
}else if(angle<135 && angle>=45){
alert('下滑動');
return false;
}else if((angle<=180 && angle>=135) || (angle>=-180 && angle<-135 )){
alert('左滑動');
return false;
}else if(angle<=-45 && angle >=-135){
alert('上滑動');
return false;
}
}
}
//添加觸摸事件的監聽，並直行自定義觸摸函數
box.addEventListener('touchstart',touchs,false);
box.addEventListener('touchmove',touchs,false);
box.addEventListener('touchend',touchs,false);
</script>
</body>
</html>