移動端瀏覽器touch事件的研究總結

2021-08-19 13:40:39 字數 1523 閱讀 6490

$("body").on("touchstart",function(e) );

$("body").on("touchmove",function(e)

elseif( x < 0 )

elseif( y > 0)

elseif( y < 0 )

else

});

判斷很簡單,touchmove的最後座標減去touchstart的起始座標,x的結果如果正數,則說明手指是從左往右划動;x的結果如果負數,則說明手指是從右往左划動;y的結果如果正數,則說明手指是從上往下划動;y的結果如果負數,則說明手指是從下往上划動。

這再邏輯上沒有任何問題。但在實際操作中,手指的上下滑動其實是很難直上直下的,只要稍微有點斜,就會被x軸的判斷先行接管。

那麼接下來加上特別的判斷技巧:

$("body").on("touchstart",function(e) );

$("body").on("touchmove",function(e)

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

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

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

else

});

增加的判斷也很簡單,無非就是判斷哪個的差值比較大。這樣一來基本上就不會出錯了

移動端 touch事件

在模擬器下不支援用on的方式來給元素加touch事件,推薦用addeventlistener方式 mouse事件的觸發必須在元素範圍內,且在移動端會有300ms左右的延遲 在移動端,觸碰乙個元素時,會立即執行新增在元素上的touch事件,然後記錄座標,300ms之後在這個座標點查詢元素,如果找到元素...

移動端touch事件

1 touch事件 touch,觸控,是移動端的觸控事件,是一組事件 1.touchstart 當手指觸控到螢幕的時候觸發 只會觸發一次 2.touchmove 當手指在螢幕中滑動時觸發 一直觸發 3.touchend 當手指離開螢幕時觸發 只會觸發一次 4.touchcancel 被迫中止滑動時觸...

移動端touch事件

touch 事件 首先 touch 包含三類事件,它們分別是 touchstart touchmove touchend 望文生義這種本能相信你應該會有,但在這裡我還是有必需對這三個詞進行一翻不必要的解釋。touchstart 手指觸控到乙個 dom 元素時觸發。touchmove 手指在乙個 do...