HTML5觸摸事件演化tap事件的方法

本文小編為大家詳細介紹“HTML5觸摸事件演化tap事件的方法”，內容詳細，步驟清晰，細節處理妥當，希望這篇“HTML5觸摸事件演化tap事件的方法”文章能幫助大家解決疑惑，下面跟著小編的思路慢慢深入，一起來學習新知識吧。

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

觸摸事件的類型：

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

注意: 在很多情況下，觸摸事件和鼠標事件會同時被觸發（目的是讓沒有對觸摸設備優化的代碼仍然可以在觸摸設備上正常工作）。如果你使用了觸摸事件，可以調用 event.preventDefault() 來阻止鼠標事件被觸發。

標準的觸摸事件

事件名稱 描述 包含touches數組

touchstart

當用戶在觸摸平面上放置了一個觸點時觸發。事件的目標 element 將是觸點位置上的那個目標 element 是

touchmove

當用戶在觸摸平面上移動觸點時觸發。

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

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

touchend

當一個觸點被用戶從觸摸平面上移除（當用戶將一個手指離開觸摸平面）時觸發。

當觸點移出觸摸平面的邊界時也將觸發。例如用戶將手指劃出屏幕邊緣。

已經被從觸摸平面上移除的觸點，可以在 changedTouches 屬性定義的 TouchList 中找到。 是

touchenter

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

touchleave

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

touchcancel

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

由于某個事件取消了觸摸：例如觸摸過程被一個模態的彈出框打斷。

觸點離開了文檔窗口，而進入了瀏覽器的界面元素、插件或者其他外部內容區域。

當用戶產生的觸點個數超過了設備支持的個數，從而導致 TouchList 中最早的 Touch 對象被取消。

是

觸摸對象屬性

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事件

XML/HTML Code復制內容到剪貼板

(function() {    

    var TOUCHSTART, TOUCHEND;    

    if (typeof(window.ontouchstart) != 'undefined') {    

        TOUCHSTART = 'touchstart';    

        TOUCHEND = 'touchend';    

        TOUCHMOVE='touchmove';    

    } else if (typeof(window.onmspointerdown) != 'undefined') {    

        TOUCHSTART = 'MSPointerDown';    

        TOUCHEND = 'MSPointerUp';    

        TOUCHMOVE='MSPointerMove';    

    } else {    

        TOUCHSTART = 'mousedown';    

        TOUCHEND = 'mouseup';    

        TOUCHMOVE = 'mousemove';    

    }    

    function NodeTouch(node) {    

        this._node = node;    

    }    

    function tap(node,callback,scope) {    

        node.addEventListener(TOUCHSTART, function(e) {    

            x = e.touches[0].pageX;    

            y = e.touches[0].pageY;    

        });    

        node.addEventListener(TOUCHEND, function(e) {    

            e.stopPropagation();    

            e.preventDefault();    

            var curx = e.changedTouches[0].pageX;    

            var cury = e.changedTouches[0].pageY;    

            if (Math.abs(curx - x) < 6 && Math.abs(cury - y) < 6) {    

                callback.apply(scope, arguments);    

            }    

        });    

    }    

    function longTap(node,callback,scope) {    

        var x,y,startTime=0,endTime=0,in_dis=false;    

        node.addEventListener(TOUCHSTART, function(e) {    

            x = e.touches[0].pageX;    

            y = e.touches[0].pageY;    

            startTime=(new Date()).getTime();    

        });    

        node.addEventListener(TOUCHEND, function(e) {    

            e.stopPropagation();    

            e.preventDefault();    

            var curx = e.changedTouches[0].pageX;    

            var cury = e.changedTouches[0].pageY;    

            if (Math.abs(curx - x) < 6 && Math.abs(cury - y) < 6) {    

                in_dis=true;    

            }else{    

                in_dis=false;    

            }    

            endTime=(new Date()).getTime();    

            if (endTime - startTime > 300 && in_dis) {    

                callback.apply(scope, arguments);    

            }    

        });    

    }    

    NodeTouch.prototype.on = function(evt, callback, scope) {    

        var scopeObj;    

        var x,y;    

        if (!scope) {    

            scopeObj = this._node;    

        } else {    

            scopescopeObj = scope;    

        }    

        if (evt === 'tap') {    

            tap(this._node,callback,scope);    

        } else if(evt === 'longtap'){    

            longTap(this._node,callback,scope);    

        } else {    

            this._node.addEventListener(evt, function() {    

                callback.apply(scope, arguments);    

            });    

        }    

        return this;    

    }    

    window.$ = function(selector) {    

        var node = document.querySelector(selector);    

        if (node) {    

            return new NodeTouch(node);    

        } else {    

            return null;    

        }    

    }    

})();    

var box=$("#box");    

box.on("longtap",function(){    

    console.log("你已經長按了");    

},box)  

讀到這里，這篇“HTML5觸摸事件演化tap事件的方法”文章已經介紹完畢，想要掌握這篇文章的知識點還需要大家自己動手實踐使用過才能領會，如果想了解更多相關內容的文章，歡迎關注億速云行業資訊頻道。