移動端touch事件

2021-09-22 18:45:18 字數 1788 閱讀 7335

touch 事件

首先 touch 包含三類事件,它們分別是:touchstart、touchmove、touchend 。望文生義這種本能相信你應該會有,但在這裡我還是有必需對這三個詞進行一翻不必要的解釋。

touchstart:手指觸控到乙個 dom 元素時觸發。

touchmove:手指在乙個 dom 元素上滑動時觸發。

touchend:手指從乙個 dom 元素上移開時觸發。

這三個事件又分別對應三個相同的觸控列表:

touches:正在觸控螢幕的所有手指的乙個列表。

targettouches:正在觸控當前 dom 元素上的手指的乙個列表。

changedtouches:涉及當前事件的手指的乙個列表。

touch 屬性

上面就是乙個 touchlist 列表。它對應的就是前面提到的三種事件(touchstart、touchmove、touchend)中的一種,在觸發時生成的乙個物件列表。列表裡最有用的就是 touch 物件了,touch 物件裡存放著對應事件的一些相關的資訊,我們就是通過這種個事件裡這些屬性的有機結合來實現各種效果。

通過上面的 radiusx,radiusy,rotationangle 這三個屬性就可以計算出你的手指觸控手機螢幕時的乙個接觸面,只不過這個接觸面是用乙個近似的橢圓來表示,也就是說它不是乙個真正意義上的接觸面,而是乙個大概的接觸面。相信心細的朋友應該會看到 touchlist 物件裡有乙個 length 屬性,並且它的值為 1  ,這說明當前只有乙個手指觸發了事件(比如:touchstart 事件),換句話說,此時你只有乙個手指放到了手機螢幕上,這個手指對應的一些資訊存放在 touch 物件裡。因為只有乙個手指放在了螢幕上,所以這個 touchlist 裡只有乙個 touch 物件,並且是第乙個下標為 0 。touchlist 列表裡還有乙個 target 屬性,這個應該很好理解,就是觸控的目標。

為了讓你能更加立體地理解上面的這些屬性,我專門從網上找了一段話來作為補充:

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(最大壓力)的浮點數。唯讀屬性。

移動端 touch事件

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

移動端touch事件

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

移動端事件 touch

touch事件有包括以下三個 注意 touch繫結方式 touch 事件在模擬器下不支援用on方式繫結事件 在真機上on方式和事件偵聽都沒有問題 推薦都使用addeventlistener 的方式新增事件 可以對比記憶兩者 touch事件和mouse事件的區別 其實,在touchmove和touch...