js滑動觸屏事件監聽

2021-07-03 20:11:25 字數 986 閱讀 9149

function span_move_fun()

});span.addeventlistener('touchmove', function(event)

});span.addeventlistener('touchend', function(event)

event.stoppropagation();

});}

js的左右滑動觸屏事件,主要有三個事件:touchstart,touchmove,touchend。這三個事件最重要的屬性是 pagex和 pagey,表示x,y座標。

touchstart在觸控開始時觸發事件

touchend在觸控結束時觸發事件

touchmove這個事件比較奇怪,按道理在觸控到過程中不斷激發這個事件才對,但是在我的 android 1.5 中,在 touchstart 激發後激發一次,然後剩餘的都和 touchend 差不多同時激發。

這三個事件都都有乙個 timestamp 的屬性,檢視 timestamp 屬性,可以看到順序是 touchstart -> touchmove ->touchmove -> … -> touchmove ->touchend。

下面是一段**例項:

document.getelementsbytagname_r('body')[0].addeventlistener('touchstart', function (e) );

document.getelementsbytagname_r('body')[0].addeventlistener('touchend', function (e) {

nchangy = e.changedtouches[0].pagey;

nchangx = e.changedtouches[0].pagex;

ps:1.touch事件跟click事件是不會被同時觸發的。現在的移動裝置做的比較好,已經把這個問題完美的避免掉了。

2.注意觸控的開始和結束位置的位移大小。如果位移小過小應該不做任何動作。

js滑動觸屏事件監聽

js滑動觸屏事件監聽 function span move fun span.addeventlistener touchmove function event span.addeventlistener touchend function event event.stoppropagation j...

js的左右滑動觸屏事件

js的左右滑動觸屏事件,主要有三個事件 touchstart,touchmove,touchend。這三個事件最重要的屬性是 pagex和 pagey,表示x,y座標。touchstart在觸控開始時觸發事件 touchend在觸控結束時觸發事件 touchmove這個事件比較奇怪,按道理在觸控到過...

JS移動客戶端 觸屏滑動事件

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