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

2022-05-26 07:24:13 字數 1255 閱讀 6041

場景:touch滑動有上,下,左,右四個方向,如何判斷其滑動的方向?

措施:1.根據移動的值正負來判斷

//

滑動處理

varstartx, starty, moveendx, moveendy, x, y;

mybody.addeventlistener('touchstart', function

(e) ,

false

); mybody.addeventlistener('touchmove', function

(e)

else

if ( math.abs(x) > math.abs(y) && x < 0)

else

if ( math.abs(y) > math.abs(x) && y > 0)

else

if ( math.abs(y) > math.abs(x) && y < 0)

else

});

2.根據角度來判斷方向

//

返回角度

function

getslideangle(dx, dy)

//根據起點和終點返回方向 1:向上,2:向下,3:向左,4:向右,0:未滑動

function

getslidedirection(startx, starty, endx, endy)

var angle =getslideangle(dx, dy);

if (angle >= -45 && angle < 45)

else

if (angle >= 45 && angle < 135)

else

if (angle >= -135 && angle < -45)

else

if ((angle >= 135 && angle <= 180) || (angle >= -180 && angle < -135))

return

result;

}//滑動處理

varstartx, starty;

mybody.addeventlistener('touchstart', function

(ev) ,

false

); mybody.addeventlistener('touchmove', function

(ev)

}, false);

前端touch事件方向的判斷

移動端touch事件判斷滑屏手勢的方向 方法一 當開始乙個touchstart事件的時候,獲取此刻手指的橫座標startx和縱座標starty 當觸發touchmove事件時,在獲取此時手指的橫座標moveendx和縱座標moveendy 最後,通過這兩次獲取的座標差值來判斷手指在手機螢幕上的滑動方...

滑動頁面時防止touch事件的誤觸問題

在移動端頁面進行優化時,一般使用touch事件替代滑鼠相關事件,用的較多的是使用touchend事件替代pc端的click和mouseup事件。但是,touchend事件在頁面滾動時有個問題。在滾動完成後,如果當前觸點的位置所指的元素繫結了touchend事件,這時便會觸發該元素的touchend事...

移動端觸屏滑動touch事件相關

移動端觸屏滑動的效果其實就是輪播,在pc的頁面上很好實現,繫結click和mouseover等事件來完成。但是在移動裝置上,要實現這種輪播的效果,就需要用到核心的touch事件。處理touch事件能跟蹤到螢幕滑動的每根手指。以下是四種touch事件 touchstart 手指放到螢幕上時觸發 tou...