手機端的touch事件

2021-09-19 16:35:41 字數 920 閱讀 5582

touchstart當手指觸控螢幕的時候觸發

touchmove當手指在螢幕來回的滑動時候觸發

touchend當手指離開螢幕的時候觸發

touchcancel當被迫終止滑動的時候觸發(來電,彈訊息)

利用touch相關事件實現移動端常見滑動效果和移動端常見的手勢事件

繫結事件:box.addeventlistener(『touchstart』,function () );

手機端原生js推薦用addeventlistener新增事件;

事件物件e:

名字:touchlist------觸控點(乙個手指觸控就是乙個觸發點,和螢幕的接觸點的個數)的集合

changedtouches改變後的觸控點集合

targettouches當前元素的觸發點集合

touches頁面上所有觸發點集合

觸控點集合在每個事件觸發的時候會不會去記錄觸控

changedtouches 每個事件都會記錄

targettouches,touches 在離開螢幕的時候無法記錄觸控點

分析滑動實現的原理:

4.1 就是讓觸控的元素隨著手指的滑動做位置的改變

4.2 位置的改變:需要當前手指的座標

4.3 在每乙個觸控點中會記錄當前觸控點的座標 e.touches[0] 第乙個觸控點

4.4 clientx clienty 基於瀏覽器視窗(視口)

4.4 pagex pagey 基於頁面(視口)

4.4 screenx screeny 基於螢幕

手機touch事件

touchstart 觸控開始的時候觸發 touchmove 手指在螢幕上滑動的時候觸發 touchend 觸控結束的時候觸發 而每個觸控事件都包括了三個觸控列表,每個列表裡包含了對應的一系列觸控點 用來實現多點觸控 touches 當前位於螢幕上的所有手指的列表。targettouches 位於當...

移動端 touch事件

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

移動端touch事件

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