HTML5觸控事件演化tap事件介紹_html5教學技巧
- WBOY原創
- 2016-05-16 15:45:252092瀏覽
觸控事件是行動瀏覽器特有的HTML5事件，雖然click事件在pc和行動端更通用，但是在行動裝置上會出現300ms延遲，較為影響使用者體驗，300ms延遲來自判斷雙擊和長按，因為只有預設等待時間結束以確定沒有後續動作發生時，才會觸發click事件。所以觸摸事件反應更快，體驗更好。
觸碰事件的種類：
為了區別觸摸相關的狀態改變，有許多類型的觸摸事件。可以透過檢查觸控事件的 <font face="NSimsun">TouchEvent.type</font> 屬性來確定目前事件屬於哪種類型。
注意: 在許多情況下，觸控事件和滑鼠事件會同時被觸發（目的是讓沒有對觸控裝置最佳化的程式碼仍然可以在觸控裝置上正常運作）。如果你使用了觸控事件，可以呼叫 <font face="NSimsun">event.preventDefault()</font> 來阻止滑鼠事件被觸發。
標準的觸控事件
| 事件名稱 | 描述 | 包含touches數組 | |||||||||||||||||||||
touchstart |
當使用者在觸控平面上放置了一個觸點時觸發。事件的目標 <font face="NSimsun">element</font> 將是接點位置上的那個目標 <font face="NSimsun">element</font> code>
|
是 | |||||||||||||||||||||
touchmove |
<font face="NSimsun">element</font> 和這個<font face="NSimsun"> touchmove </font>事件對應的 <font face="NSimsun">touchstart 事件的目標</font> <font face="NSimsun">element</font> 相同，
即使 <font face="NSimsun">touchmove</font> 事件觸發時，觸點已經移出了該 <font face="NSimsun">element</font> 。
|
是 | |||||||||||||||||||||
touchend |
當一個觸點被使用者從觸控平面上移除（當使用者將一個手指離開觸控平面）時觸發。
當觸點移出觸摸平面的邊界時也會觸發。例如使用者將手指劃出螢幕邊緣。
已經被從觸控平面上移除的接點，可以在 changedTouches 屬性定義的 TouchList 中找到。
|
是 | |||||||||||||||||||||
touchenter |
當觸點進入某個 <font face="NSimsun">element</font> 時觸發。 此事件沒有冒泡過程。 |
是 | |||||||||||||||||||||
touchleave |
觸點離開某個 <font face="NSimsun">element</font> 時觸發。 此事件沒有冒泡過程。 |
是 | |||||||||||||||||||||
touchcancel |
當觸點因某些原因中斷時觸發。有幾個可能的原因如下（具體的原因根據不同的設備和瀏覽器有所不同）：
|
是 |
觸控物件屬性
<font face="NSimsun">Touch.identifier</font> |
返回一個可以唯一地識別和觸摸平面接觸的點的值. 這個值在這根手指（或觸摸筆等）所引發的所有事件中保持一致, 直到它離開觸摸平面. | ||||||||||||||||||||||
<font face="NSimsun">Touch.screenX</font> |
觸點相對於螢幕左邊沿的的X座標. 唯讀屬性. | ||||||||||||||||||||||
<font face="NSimsun">Touch.screenY</font> |
觸點相對於螢幕上邊緣的的Y座標. 唯讀屬性. | ||||||||||||||||||||||
<font face="NSimsun">Touch.clientX</font> |
觸點相對於可見視區左邊沿的的X座標. 不包括任何滾動偏移. 只讀屬性. | ||||||||||||||||||||||
<font face="NSimsun">Touch.clientY</font> |
觸點相對於可見視區上邊緣的的Y座標. 不包括任何滾動偏移. 唯讀屬性. | ||||||||||||||||||||||
<font face="NSimsun">Touch.pageX</font> |
觸點相對於HTML文件左邊沿的的X座標. 當存在水平滾動的偏移時,這個值包含了水平滾動的偏移. 唯讀屬性.
|
||||||||||||||||||||||
<font face="NSimsun">Touch.pageY</font> |
觸點相對於HTML文件上邊緣的的Y座標. <font face="NSimsun">當存在水平滾動的偏移時, 這個值包含了垂直滾動的偏移</font>. <strong>只讀屬性.</strong>
|
||||||||||||||||||||||
<font face="NSimsun">Touch.radiusX</font> |
能夠包圍使用者和觸控平面的接觸面的最小橢圓的水平軸(X軸)半徑. 這個值的單位和<font face="NSimsun"> screenX 相同. </font>唯讀屬性.
|
||||||||||||||||||||||
<code><font face="NSimsun">Touch.force</font> |
手指擠壓觸摸平面的壓力大小, 從0.0(沒有壓力)到1.0(最大壓力)的浮點數. 只讀屬性. | ||||||||||||||||||||||
<code><font face="NSimsun">Touch.radiusY</font> |
能夠包圍使用者和觸控平面的接觸面的最小橢圓的垂直軸(Y軸)半徑. 這個值的單位和<font face="NSimsun"> screenY 相同. </font>唯讀屬性.
|
||||||||||||||||||||||
<code><code><font face="NSimsun">Touch.target</font> |
<font face="NSimsun">touchstart</font> 事件中), 接點位於的HTML元素. 就算在接點移動過程中, 觸點的位置已經離開了這個元素的有效互動區域,或這個元素已經被從文檔中移除. 需要注意的是, 如果這個元素在觸摸過程中被移除, 這個事件仍然會指向它, 但是不會再冒泡這個事件到 window 或 <font face="NSimsun">document</font> 物件.因此, 如果有元素在觸摸過程中可能被移除, 最佳實踐是將觸摸事件的監聽器綁定到這個元素本身, 防止元素被移除後, 無法再從它的上一級元素上偵測到從該元素冒泡的事件. 唯讀屬性.
|
| 事件名称 | 描述（在触摸设备上） |
|---|---|
| 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事件
XML/HTML Code複製內容到剪貼簿
- (函數() {
- var 觸碰開始，觸碰結束；
- if (typeof(window.ontouchstart) != '未定義') {
- TOUCHSTART = TOUCHEND
- = TOUCHMOVE='touchmove' =
- 'touchmove'='touchmove' } else if (typeof(window.onmspointerdown) != '未定義') {
- TOUCHSTART =
- TOUCHEND =
- TOUCHMOVE='MSPointerMMf> } 其他 {
- 觸碰開始 = 'mousedown' TOUCHEND =
- 'mouseup' = 'mouseup'
- = ？ 觸碰移動 = 'mousemove' } 函數 NodeTouch(node) { this._node
- = 節點； = 節點； = 節點； = 節點； }
- 函數 tap(節點、回呼、範圍) {
- node.addEventListener(TOUCHSTART, function(e) {
- x =
- e
- y
- = e }）；
- node.addEventListener(TOUCHEND, function(e) {
- e.stopPropagation();
- e.preventDefault();
- var curx = e = e
- var cury = e
- if (Math.abs(curx - x) y ) 6) { callback.apply（範圍，參數）；
- }
- });
- }
- 函數 longTap(節點、回呼、範圍) {
- var x,y,
- 開始時間=0=00 >=0,in_dis=false
- =false
- ; node.addEventListener(TOUCHSTART, function(e) { x
- = e
= e y - = e
- startTime=(new Date()).getTime(); }）；
- node.addEventListener(TOUCHEND, function(e) {
- e.stopPropagation();
- e.preventDefault();
- var curx = e = e
- var cury = e
- if (Math.abs(curx - x) y ) 6) {
- in_dis=in_dis=in_dis =
- }其他{
- in_dis=in_dis =
- in_dis =
- }
- endTime=(new Date()).getTime(); if (endTime - startTime
- > callback.apply（範圍，參數）；
- }
- });
- }
- NodeTouch.prototype.on = 函數
- var scopeObj;
- var x,y;
- if (!scope) {
- scopeObj = 這 } 其他 {
- 範圍scopeObj = }
- if ( evt
- === '點選') { === '點選') { 點> 點選(this._node,回呼,範圍);
- } else if(evt === 'longtap'){
- longTap(this._node,callback,scope);
- } 其他 {
- this._node.addEventListener(evt, function() {
- callback.apply（範圍，參數）；
- });
- }
- 返回此；
- }
- 窗口。 $ = 函數（選擇器） {
- var 節點 = if （節點） {
- 與新的 NodeTouch(node);
- } 其他 {
- 返回 null；
- }
- }
- })();
- var 盒子
- =$("#box"); box.on("longtap",function(){
- console.log("你已經長按了");
- }，方框）
陳述：
本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn