HTML5觸控事件演化tap事件介紹_html5教學技巧

觸控事件是行動瀏覽器特有的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

事件名称	描述	包含touches数组
touchstart	当用户在触摸平面上放置了一个触点时触发。事件的目标 <font face="NSimsun">element</font> 将是触点位置上的那个目标 <font face="NSimsun">element</font>	是
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">TouchList</font> 中最早的 <font face="NSimsun">Touch</font> 对象被取消。	是

當使用者在觸控平面上移動觸點時觸發。 事件的目標 <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">TouchList</font> 中最早的 <font face="NSimsun">Touch</font> 物件被取消。

是

觸控物件屬性

<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">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>. 只读属性.
<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元素. 哪怕在触点移动过程中, 触点的位置已经离开了这个元素的有效交互区域, 或者这个元素已经被从文档中移除. 需要注意的是, 如果这个元素在触摸过程中被移除, 这个事件仍然会指向它, 但是不会再冒泡这个事件到 <font face="NSimsun">window</font> 或 <font face="NSimsun">document</font> 对象. 因此, 如果有元素在触摸过程中可能被移除, 最佳实践是将触摸事件的监听器绑定到这个元素本身, 防止元素被移除后, 无法再从它的上一级元素上侦测到从该元素冒泡的事件. 只读属性.

當這個觸點最開始被追蹤時(在 <font face="NSimsun">touchstart</font> 事件中), 接點位於的HTML元素. 就算在接點移動過程中, 觸點的位置已經離開了這個元素的有效互動區域,

或這個元素已經被從文檔中移除. 需要注意的是, 如果這個元素在觸摸過程中被移除, 這個事件仍然會指向它, 但是不會再冒泡這個事件到 window 或 <font face="NSimsun">document</font> 物件.

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

 

IE指针事件

事件名称	描述（在触摸设备上）
MSPointerDown	触摸开始
MSPointerMove	接触点移动
MSPointerUp	触摸结束
MSPointerOver	触摸点移动到元素内，相当于mouseover
MSPointerOut	触摸点离开元素，相当于mouseout

IE10 的觸控事件

 

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複製內容到剪貼簿

1. (函數() {    
2.     var 觸碰開始，觸碰結束；    
3.     if (typeof(window.ontouchstart) != '未定義') {    
4.         TOUCHSTART =         TOUCHEND
5.  =           TOUCHMOVE='touchmove'
=
6. 'touchmove'='touchmove'      
    } else if (typeof(window.onmspointerdown) != '未定義') {    
        
8. TOUCHSTART
 = 
9.         TOUCHEND =           
10. TOUCHMOVE='MSPointerMMf>    } 其他 {             
11. 觸碰開始 = 'mousedown'        TOUCHEND = 
12. 'mouseup' = 
'mouseup'
13.  = ？         觸碰移動 = 'mousemove'
    }         函數 NodeTouch(node) {             this._node
14.  = 節點；     = 節點；     = 節點；     = 節點；    
    }    
    函數 tap(節點、回呼、範圍) {    
        node.addEventListener(TOUCHSTART, function(e) {    
17.             x
 = 
18. e
19.             y
20.  = e
        }）；    
21.         node.addEventListener(TOUCHEND, function(e) {    
22.             e.stopPropagation();    
23.             e.preventDefault();    
24.             var curx = e = e
25.             var cury = e
26.             if (Math.abs(curx - x)   y )  6) {    
                callback.apply（範圍，參數）；    
            }    
        });    
    }    
    函數 longTap(節點、回呼、範圍) {    
        var x,y,
32. 開始時間=0=00 >=0,in_dis=false
33. =false
34. ;             node.addEventListener(TOUCHSTART, function(e) {                 x
35.  = e = e             y
36.  = e
            
37. startTime=(new Date()).getTime();             }）；    
38.         node.addEventListener(TOUCHEND, function(e) {    
39.             e.stopPropagation();    
40.             e.preventDefault();    
41.             var curx = e = e
42.             var cury = e
43.             if (Math.abs(curx - x)   y )  6) {    
                
44. in_dis=in_dis=in_dis
=
            }其他{    
46.                 in_dis=in_dis
=
47. in_dis
=
48.             }                 
49. endTime=(new Date()).getTime();                 if (endTime - startTime 
50. >
                callback.apply（範圍，參數）；    
            }    
        });    
    }    
54.     NodeTouch.prototype.on = 函數
55.         var scopeObj;    
56.         var x,y;    
57.         if (!scope) {    
58.             scopeObj = 這    
        } 其他 {    
            
60. 範圍scopeObj =          }    
61.         if (
evt
62.  === '點選') {    === '點選') {   點>
            點選(this._node,回呼,範圍);    
        } else if(evt === 'longtap'){    
64.             longTap(this._node,callback,scope);    
65.         } 其他 {    
66.             this._node.addEventListener(evt, function() {    
67.                 callback.apply（範圍，參數）；    
68.             });    
69.         }    
70.         返回此；    
71.     }    
72.     窗口。 $ = 函數（選擇器） {    
73.         var 節點 =          if （節點） {    
74.             與新的 NodeTouch(node);    
75.         } 其他 {    
76.             返回 null；    
77.         }    
78.     }    
79. })();    
80. var 
盒子
81. =$("#box");     box.on("longtap",function(){    
82.     console.log("你已經長按了");    
83. }，方框）  

以上這篇HTML5觸摸事件接下來tap事件介紹就是小編分享給大家的全部內容了，希望能給大家一個參考，也希望大家多多支持腳本之家。

原文網址：http://www.cnblogs.com/hutuzhu/archive/2016/03/25/5315638.html