移動端的觸控事件

2021-09-27 02:09:01 字數 1594 閱讀 8224

首先 touch 包含三類事件,它們分別是:touchstart、touchmove、touchend

touch 屬性

1.touch.identifier:此 touch 物件的唯一識別符號。 一次觸控動作(我們指的是手指的觸控)在平面上移動的整個過程中,該識別符號不變。 可以根據它來判斷跟蹤的是否是同一次觸控過程,此值為唯讀屬性。

2.touch.screenx:觸點相對於螢幕左邊沿的x座標。唯讀屬性。

3.touch.screeny:觸點相對於螢幕上邊沿的y座標。唯讀屬性。

4.touch.clientx:觸點相對於可見視區(visual viewport)左邊沿的x座標。不包括任何滾動偏移。唯讀屬性。

5.touch.clienty:觸點相對於可見視區(visual viewport)上邊沿的y座標。不包括任何滾動偏移。唯讀屬性。

6.touch.pagex:觸點相對於html文件左邊沿的x座標。當存在水平滾動的偏移時,這個值包含了水平滾動的偏移。唯讀屬性。

7.touch.pagey:觸點相對於html文件上邊沿的y座標。當存在水平滾動的偏移時,這個值包含了垂直滾動的偏移。唯讀屬性。

8.touch.radiusx:能夠包圍使用者和觸控平面的接觸面的最小橢圓的水平軸(x軸)半徑。這個值的單位和 screenx 相同。唯讀屬性。

9.touch.radiusy:能夠包圍使用者和觸控平面的接觸面的最小橢圓的垂直軸(y軸)半徑。這個值的單位和 screeny 相同。唯讀屬性。

10.touch.rotationangle:它是這樣乙個角度值:由radiusx 和 radiusy描述的正方向的橢圓,需要通過順時針旋轉這個角度值,才能最精確地覆蓋住使用者和觸控平面的接觸面。唯讀屬性。

11.touch.force:手指擠壓觸控平面的壓力大小,從0.0(沒有壓力)到1.0(最大壓力)的浮點數。唯讀屬性。

12.touch.target:當這個觸點最開始被跟蹤時(在 touchstart 事件中),觸點位於的html元素。哪怕在觸點移動過程中,觸點的位置已經離開了這個元素的有效互動區域,或者這個元素已經被從文件中移除。需要注意的是,如果這個元素在觸控過程中被移除,這個事件仍然會指向它,但是不會再冒泡這個事件到 window 或 document 物件。因此,如果有元素在觸控過程中可能被移除,最佳實踐是將觸控事件的***繫結到這個元素本身,防止元素被移除後,無法再從它的上一級元素上偵測到從該元素冒泡的事件。唯讀屬性。

如:

var box = document.queryselector('.box');

// 當你的手指觸控螢幕的時候觸發

box.addeventlistener('touchstart', function (e) )

// 當你的手指在螢幕上滑動的時候觸發

box.addeventlistener('touchmove', function (e) )

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

box.addeventlistener('touchend', function (e) )

// touchancel 當你被迫終止滑動的時候來觸發

box.addeventlistener('touchancel', function (e) )

移動端的常用觸控事件

1 touches 表示當前跟蹤的觸控操作的 touch 物件的陣列。2 targettouches 特定於事件目標的 touch 物件的陣列。3 changetouches 表示自上次觸控以來發生了什麼改變的 touch 物件的陣列。每個 touch 物件包含的屬性 4 clientx 觸控目標在...

移動端JS 觸控事件基礎

一 手機上的觸控事件 基本事件 touchstart 手指剛接觸螢幕時觸發 touchmove 手指在螢幕上移動時觸發 touchend 手指從螢幕上移開時觸發 下面這個比較少用 touchcancel 觸控過程被系統取消時觸發 每個事件都有以下列表,比如touchend的targettouches...

移動端觸控事件touchmove的坑

一說到移動端觸控事件,大家的反應不就是touchstart,touchmove,touchend嗎,相當於pc段的mousedown,mousemove,mouseup,只要是寫過pc端的js的話,若不慎,往往會坑在移動端。比如說最近我就被touchmove坑了好久好久不能自拔。我的意圖是在觸控的時...