HTML5觸控事件演化tap事件

觸控事件是移動瀏覽器特有的html5事件，雖然click事件在pc和移動端更通用，但是在移動端會出現300ms延遲，較為影響使用者體驗，300ms延遲來自判斷雙擊和長按，因為只有預設等待時間結束以確定沒有後續動作發生時，才會觸發click事件。所以觸控事件反應更快，體驗更好。

觸控事件的型別：

為了區別觸控相關的狀態改變，存在多種型別的觸控事件。可以通過檢查觸控事件的touchevent.type屬性來確定當前事件屬於哪種型別。

注意:在很多情況下，觸控事件和滑鼠事件會同時被觸發（目的是讓沒有對觸控裝置優化的**仍然可以在觸控裝置上正常工作）。如果你使用了觸控事件，可以呼叫event.preventdefault()來阻止滑鼠事件被觸發。

標準的觸控事件

事件名稱

描述包含touches陣列

當使用者在觸控平面上放置了乙個觸點時觸發。事件的目標element將是觸點位置上的那個目標element是

當使用者在觸控平面上移動觸點時觸發。

事件的目標element和這個touchmove事件對應的touchstart 事件的目標element相同，

哪怕當touchmove事件觸發時，觸點已經移出了該element。

是當乙個觸點被使用者從觸控平面上移除（當使用者將乙個手指離開觸控平面）時觸發。

當觸點移出觸控平面的邊界時也將觸發。例如使用者將手指劃出螢幕邊緣。

已經被從觸控平面上移除的觸點，可以在changedtouches 屬性定義的touchlist中找到。

是當觸點進入某個element時觸發。此事件沒有冒泡過程。是

當觸點離開某個element時觸發。此事件沒有冒泡過程。是

當觸點由於某些原因被中斷時觸發。有幾種可能的原因如下（具體的原因根據不同的裝置和瀏覽器有所不同）：是

觸控物件屬性

touch.identifier

返回乙個可以唯一地識別和觸控平面接觸的點的值. 這個值在這根手指（或觸控筆等）所引發的所有事件中保持一致, 直到它離開觸控平面.

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

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

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

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

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

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

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

touch.force

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

touch.radiusy

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

touch.target

當這個觸點最開始被跟蹤時(在touchstart事件中), 觸點位於的html元素. 哪怕在觸點移動過程中, 觸點的位置已經離開了這個元素的有效互動區域,

或者這個元素已經被從文件中移除. 需要注意的是, 如果這個元素在觸控過程中被移除, 這個事件仍然會指向它, 但是不會再冒泡這個事件到window或document物件.

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

ie10+的觸控事件

ie指標事件

事件名稱

描述（在觸控裝置上）

mspointerdown

觸控開始

mspointermove

接觸點移動

mspointerup

觸控結束

mspointerover

觸控點移動到元素內，相當於mouseover

mspointerout

觸控點離開元素，相當於mouseout

mspointerevent屬性

屬性描述

hwtimestamp

建立事件的時間（ms）

isprimary

標識該指標是不是主指標

pointerid

指標的唯一id（類似於觸控事件的識別符號）

pointertype

乙個整數，標識了該事件來自滑鼠、手寫筆還是手指

pressure

筆的壓力，0-255，只有手寫筆輸入時才可用

rotation

0-359的整數，游標的旋轉度（如果支援的話）

tiltx/tilty

手寫筆的傾斜度，只有用手寫筆輸入時才支援

等價事件滑鼠

觸控鍵盤

mousedown

touchstart

keydown

mousemove

touchmove

keydown

mouseup

touchend

keyup

mouseover

focus

很顯然，觸控動作序列：touchstart-touchmove-touchend和滑鼠序列：mousedown-mousemove-mouseup以及鍵盤序列：keydown-keypress-keyup很相似，這並不是巧合，因為這三種互動模式都可以描述為start-move-stop。

話說回來，click要經過touchstart-touchmove-touchend流程，300ms延遲，所以需要tap事件，tap就是在同乙個點輕觸時間很短。

封裝好的tap和longtap事件

(function()  else if (typeof(window.onmspointerdown) != 'undefined')  else 
function nodetouch(node) 
function tap(node,callback,scope) );
node.addeventlistener(touchend, function(e) 
});}
function longtap(node,callback,scope) );
node.addeventlistener(touchend, function(e) else
endtime=(new date()).gettime();
if (endtime - starttime > 300 && in_dis) 
});}
nodetouch.prototype.on = function(evt, callback, scope)  else 
if (evt === 'tap')  else if(evt === 'longtap') else );
}return this;
}window.$ = function(selector)  else 
}})();
var box=$("#box");
box.on("longtap",function(),box)

HTML5觸控事件演化tap事件

html5 觸控控制

html5螢幕旋轉事件

手機端html5觸屏事件 touch事件

HTML5觸控事件演化tap事件

html5 觸控控制

html5螢幕旋轉事件

手機端html5觸屏事件 touch事件

相關推薦