前端touch事件方向的判斷

2022-05-09 08:00:10 字數 1442 閱讀 7816

移動端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)

else if ( x < 0 )

else if ( y > 0)

else if ( y < 0 )

else

然而在實際的操作中,手指的上下滑動很難做到直上直下,只要稍微有點斜,只要稍微有點斜,就會被x軸的判斷先行接管,而與我們實際的操作意願相背離。此時就需要新增特殊的判斷技巧,修改**如下

var mybody = document.getelementsbytagname('body')[0];

//滑動處理

var startx, starty, moveendx, moveendy, x, y;   

mybody.addeventlistener('touchstart', function(e) , false);

mybody.addeventlistener('touchmove', function(e) else if (angle >= 45 && angle < 135) else if (angle >= -135 && angle < -45) else if ((angle >= 135 && angle <= 180) || (angle >= -180 && angle < -135)) , false);

mybody.addeventlistener('touchmove', function (ev), false);

ps:用touchmove事件獲取終點座標,而不是用touchend事件,是因為當你只是點選螢幕的時候,就會觸發touchend事件,但是不會觸發touchmove事件。這樣會造成touchend中取得的endx,從而造成endy值不準確。比如先滑動再點選,可能同樣會觸發滑動事件

如何判斷touch事件滑動的方向?

場景 touch滑動有上,下,左,右四個方向,如何判斷其滑動的方向?措施 1.根據移動的值正負來判斷 滑動處理 varstartx,starty,moveendx,moveendy,x,y mybody.addeventlistener touchstart function e false myb...

touch事件的響應過程

在根檢視的.h檔案中 如下 import inte ce touchview uiview property assign doublelastdistance end 在.m檔案中的 如下 import touchview.h implementationtouchview id initwith...

手機端的touch事件

touchstart當手指觸控螢幕的時候觸發 touchmove當手指在螢幕來回的滑動時候觸發 touchend當手指離開螢幕的時候觸發 touchcancel當被迫終止滑動的時候觸發 來電,彈訊息 利用touch相關事件實現移動端常見滑動效果和移動端常見的手勢事件 繫結事件 box.addeven...