移動端touch事件判斷滑屏手勢的方向
方法一
- 當開始一個touchstart事件的時候，獲取此刻手指的橫坐標startX和縱坐標startY；
- 當觸發touchmove事件時，在獲取此時手指的橫坐標moveEndX和縱坐標moveEndY;最后，通過這兩次獲取的坐標差值來判斷手指在手機屏幕上的滑動方向。
思路：用touchmove的最后坐標減去touchstart的起始坐標，X的結果如果正數，則說明手指是從左往右划動；X的結果如果負數，則說明手指是從右往左划動；Y的結果如果正數，則說明手指是從上往下划動；Y的結果如果負數，則說明手指是從下往上划動。
具體代碼如下：
var mybody = document.getElementsByTagName('body')[0];
//滑動處理
var startX, startY, moveEndX, moveEndY, X, Y;
mybody.addEventListener('touchstart', function(e) {
e.preventDefault();
startX = e.touches[0].pageX;
startY = e.touches[0].pageY;
});
mybody.addEventListener('touchmove', function(e) {
e.preventDefault();
moveEndX = e.changedTouches[0].pageX;
moveEndY = e.changedTouches[0].pageY;
X = moveEndX - startX;
Y = moveEndY - startY;
if ( X > 0 ) {alert(‘向右’);}
else if ( X < 0 ) {alert(‘向左’);}
else if ( Y > 0) {alert(‘向下’);}
else if ( Y < 0 ) { alert(‘向上’);}
else{alert(‘沒滑動’); }
});
然而在實際的操作中，手指的上下滑動很難做到直上直下，只要稍微有點斜，只要稍微有點斜，就會被X軸的判斷先行接管，而與我們實際的操作意願相背離。此時就需要添加特殊的判斷技巧，修改代碼如下：
var mybody = document.getElementsByTagName('body')[0];
//滑動處理
var startX, startY, moveEndX, moveEndY, X, Y;
mybody.addEventListener('touchstart', function(e) {
e.preventDefault();
startX = e.touches[0].pageX;
startY = e.touches[0].pageY;
}, false);
mybody.addEventListener('touchmove', function(e) {
e.preventDefault();
moveEndX = e.changedTouches[0].pageX;
moveEndY = e.changedTouches[0].pageY;
X = moveEndX - startX;
Y = moveEndY - startY;
if ( Math.abs(X) > Math.abs(Y) && X > 0 ) {
alert("向右");
}
else if ( Math.abs(X) > Math.abs(Y) && X < 0 ) {
alert("向左");
}
else if ( Math.abs(Y) > Math.abs(X) && Y > 0) {
alert("向下");
}
else if ( Math.abs(Y) > Math.abs(X) && Y < 0 ) {
alert("向上");
}
else{
alert("沒滑動");
}
});
以上代碼，在測試時仍不能達到預期的效果，因為還有一個問題——body的元素的高仔細查查，發現其值是0；
故還應該在此基礎上添加以下代碼：
var mybody = document.getElementsByTagName('body')[0];
var h = document.documentElement.clientHeight;
mybody.style.height = h + 'px';
到此，已實現了手機移動端手指的上滑、下滑、左滑和右滑操作。
方法二
1、滑動屏幕事件使用HTML5中的touchstart滑動開始事件和touchmove滑動結束事件。
2、方向的判斷：以起點做平面坐標系，與終點連線做直線，直線與x正半軸計算角度；我們以45度角為方向分割線，如：只要滑動角度大於等於45度且小於135度，則判斷它方向為向上滑。如圖所示：
3、使用Math.atan2來計算起點與終點形成的直線角度。
注意：標准坐標系與屏幕坐標系並不相同，在屏幕坐標系中，上半軸為負值，要實現轉換，只需要調換Y坐標起點與終於位置即可。
代碼如下：
var h = document.documentElement.clientHeight,
mybody = document.getElementsByTagName('body')[0];
mybody.style.height = h + 'px';
//返回角度
function GetSlideAngle(dx,dy) {
return Math.atan2(dy,dx) * 180 / Math.PI;
}
//根據起點和終點返回方向 1：向上，2：向下，3：向左，4：向右,0：未滑動
function GetSlideDirection(startX,startY, endX, endY) {
var dy = startY - endY;
var dx = endX - startX;
var result = 0;
//如果滑動距離太短
if (Math.abs(dx) < 2 && Math.abs(dy) < 2) {
return result;
}
var angle = GetSlideAngle(dx, dy);
if (angle >= -45 && angle < 45) {
result = 4;
}else if (angle >= 45 && angle < 135) {
result = 1;
}else if (angle >= -135 && angle < -45) {
result = 2;
}else if ((angle >= 135 && angle <= 180) || (angle >= -180 && angle < -135)) {
result = 3;
}
return result;
}
//滑動處理
var startX, startY;
mybody.addEventListener('touchstart', function (ev){
ev.preventDefault();
startX = ev.touches[0].pageX;
startY = ev.touches[0].pageY;
}, false);
mybody.addEventListener('touchmove', function (ev){
var endX, endY;
ev.preventDefault();
endX = ev.changedTouches[0].pageX;
endY = ev.changedTouches[0].pageY;
var direction = GetSlideDirection(startX, startY, endX, endY);
switch (direction){
case 0:
alert("沒滑動");
break;
case 1:
alert("向上");
break;
case 2:
alert("向下");
break;
case 3:
alert("向左");
break;
case 4:
alert("向右");
break;
default:
}
}, false);
PS：用touchmove事件獲取終點坐標，而不是用touchend事件，是因為當你只是點擊屏幕的時候，就會觸發touchEnd事件，但是不會觸發touchMove事件。這樣會造成touchEnd中取得的endX，從而造成endY值不准確。比如先滑動再點擊，可能同樣會觸發滑動事件。
另外此代碼只是提供了判斷滑屏方向的思路，還需要根據具體的項目需求進行修改完善！