touch事件基礎語法

2021-10-06 00:17:31 字數 3150 閱讀 8041

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

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

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

touches: 當前螢幕上所有觸控點的列表;

targettouches: 正在觸控當前 dom 元素上的觸控點的乙個列表;

changedtouches: 涉及當前(引發)事件的觸控點的列表

通過乙個例子來區分一下觸控事件中的這三個屬性:

用乙個手指接觸螢幕,觸發事件,此時這三個屬性有相同的值。

用第二個手指接觸螢幕,此時,touches有兩個元素,每個手指觸控點為乙個值。當兩個手指觸控相同元素時,targettouchestouches的值相同,否則==targettouches== 只有乙個值。changedtouches此時只有乙個值,為第二個手指的觸控點,因為第二個手指是引發事件的原因

用兩個手指同時接觸螢幕,此時changedtouches有兩個值,每乙個手指的觸控點都有乙個值

手指滑動時,三個值都會發生變化

乙個手指離開螢幕,touchestargettouches中對應的元素會同時移除,而changedtouches仍然會存在元素。

手指都離開螢幕之後,touches和targettouches中將不會再有值,changedtouches還會有乙個值,

此值為最後乙個離開螢幕的手指的接觸點。

2. 觸點座標選取

touchstart和touchmove使用:e.targettouches[0].pagex(jquery)e.originalevent.targettouches[0].pagex

touchend使用:e.changedtouches[0].pagex(jquery)e.originalevent.changedtouches[0].pagex

3.touchmove事件物件的獲取

想要在touchmove:function(e,引數一)加乙個引數,結果直接使用e.preventdefault()就會 e 報錯,處理方法為使用arguments[0]獲取event引數

touchmove:

function

(e,引數一)

touchlist 

length:1 //只有乙個觸控點

0:touch

clientx:65 // 觸控點在瀏覽器視窗中的橫座標

clienty:18 // 觸控點在瀏覽器視窗中的縱座標

force:1 // 觸控點壓力大小

identifier:0 // 觸控點唯一標識(id)

pagex:65 // 觸控點在頁面中的橫座標

pagey:18 // 觸控點在頁面中的縱座標

radiusx:11.5 // 觸控點橢圓的水平半徑

radiusy:11.5 // 觸控點橢圓的垂直半徑

rotationangle:0 // 旋轉角度

screenx:560 // 觸控點在螢幕中的橫座標

screeny:175 // 觸控點在螢幕中的縱座標

target:div#touchlog 觸控目標

__proto__:touch

__proto__:touchlist

來自 mozilla

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 物件。因此,如果有元素在觸控過程中可能被移除,最佳實踐是將觸控事件的***繫結到這個元素本身,防止元素被移除後,無法再從它的上一級元素上偵測到從該元素冒泡的事件。唯讀屬性。

touch事件分析

事件分發 public boolean dispatchtouchevent motionevent ev touch 事件發生時 activity 的 dispatchtouchevent motionevent ev 方法會以隧道方式 從根元素依次往下傳遞直到最內層子元素或在中間某一元素中由於某...

touch事件傳遞

首先設計到下面4個方法 先後順數也是這麼執行的,dispatchtouchevent 分發 onintercepttouchevent 攔截 ontouch 觸控 ontouchevent 觸控事件 1 首先講述一下 ontouch ontouchevent 的區別 ontouch 是 view o...

touch事件應用

js的touch事件,一般用於移動端的觸屏滑動 function function touch event touchstart 當手指觸控螢幕時觸發 即使已經有乙個手指放在了螢幕上也會觸發。touchmove 當手指在螢幕上滑動時連續的觸發。在這個事件發生期間,呼叫preventdefault 可...