移動web 移動端Touch事件

2021-08-01 15:32:23 字數 762 閱讀 2936

一, touch事件

1,touchstart:當手指觸碰螢幕時候觸發。

繫結事件的方法:

dom.addeventlistener('touchstart',function

(e){});

事件返回的e物件包含那些移動端特有的屬性:

targettouches 目標元素的所有當前觸控,被觸控的物件元素內的

changedtouches 頁面上最新更改的所有觸控。是乙個陣列,記錄了所有的觸控點。

touches 頁面上的所有觸控

第乙個觸控點:e.touches [0];

第乙個觸控點:e.touches [0].clientx;

2,touchmove:當手指在螢幕上滑動時連續觸發

3,touchend :當手指離開螢幕時觸發。

4,touchcancel :系統停止跟蹤觸控時會觸發。

注意:在touchend 事件的時候event只會記錄 changedtouches

clientx:觸控目標在視口中的x座標。

clienty:觸控目標在視口中的y座標。

pagex:觸控目標在頁面中的x座標。

pagey:觸控目標在頁面中的y座標。

screenx:觸控目標在螢幕中的x座標。

screeny:觸控目標在螢幕中的y座標。

移動端的無縫滑動。

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