原理：1：當(dāng)開(kāi)始一個(gè)touchstart事件的時(shí)候，獲取此刻手指的橫坐標(biāo)startX和staerY；
2：當(dāng)觸發(fā)touchmove事件的時(shí)候，再獲取此時(shí)手指的橫坐標(biāo)moveEndX和縱坐標(biāo)moveEndY；最后，通過(guò)兩次獲取的坐標(biāo)差值來(lái)判斷手指在手機(jī)屏幕上的滑動(dòng)方向。
代碼：
$("body").on("touchstart", function(e) {
e.preventDefault();
startX = e.originalEvent.changedTouches[0].pageX,
startY = e.originalEvent.changedTouches[0].pageY;
});
$("body").on("touchmove", function(e) {
e.preventDefault();
moveEndX = e.originalEvent.changedTouches[0].pageX,
moveEndY = e.originalEvent.changedTouches[0].pageY,
X = moveEndX - startX,
Y = moveEndY - startY;
if ( X > 0 ) {
alert("left 2 right");
}
else if ( X < 0 ) {
alert("right 2 left");
}
else if ( Y > 0) {
alert("top 2 bottom");
}
else if ( Y < 0 ) {
alert("bottom 2 top");
}
else{
alert("just touch");
}
});
總結(jié)：touchmove的最后坐標(biāo)減去touchstart的起始坐標(biāo)，X的結(jié)果如果正數(shù)，則說(shuō)明手指是從左往右劃動(dòng)；X的結(jié)果如果負(fù)數(shù)，則說(shuō)明手指是從右往左劃動(dòng)；Y的結(jié)果如果正數(shù)，則說(shuō)明手指是從上往下劃動(dòng)；Y的結(jié)果如果負(fù)數(shù)，則說(shuō)明手指是從下往上劃動(dòng)。
但是：
實(shí)際上手指在手機(jī)上面滑動(dòng)時(shí)很難做到直上直下的滑動(dòng)；只要稍微有點(diǎn)斜，就會(huì)被x軸的判斷現(xiàn)行接管，而與我們的實(shí)際操作醫(yī)院相背離。此時(shí)就需要添加特殊的判斷技巧，代碼如下：
$("body").on("touchstart", function(e) {
e.preventDefault();
startX = e.originalEvent.changedTouches[0].pageX,
startY = e.originalEvent.changedTouches[0].pageY;
});
$("body").on("touchmove", function(e) {
e.preventDefault();
moveEndX = e.originalEvent.changedTouches[0].pageX,
moveEndY = e.originalEvent.changedTouches[0].pageY,
X = moveEndX - startX,
Y = moveEndY - startY;
if ( Math.abs(X) > Math.abs(Y) && X > 0 ) {
alert("left 2 right");
}
else if ( Math.abs(X) > Math.abs(Y) && X < 0 ) {
alert("right 2 left");
}
else if ( Math.abs(Y) > Math.abs(X) && Y > 0) {
alert("top 2 bottom");
}
else if ( Math.abs(Y) > Math.abs(X) && Y < 0 ) {
alert("bottom 2 top");
}
else{
alert("just touch");
}
});
以上代碼，在測(cè)試時(shí)仍不能達(dá)到預(yù)期的效果，此時(shí)要注意到一個(gè)事實(shí)--$('body').height = 0;
故還應(yīng)該在此基礎(chǔ)上添加以下代碼：
var windowHeight = $(window).height(),
$body = $("body");
// console.log($(window).height()); //627
// console.log($('body').height()); //0
$body.css("height", windowHeight); //重要代碼
以上代碼結(jié)合在手機(jī)端就可以判斷手指的上滑，下滑，左滑，右滑操作；
另一位大神寫的，我只是記錄方便自己使用。
附上鏈接大神鏈接
