HTML5觸摸事件演化tap事件的示例分析

HTML5觸摸事件演化tap事件介紹，相信很多沒有經驗的人對此束手無策，為此本文總結了問題出現的原因和解決方法，通過這篇文章希望你能解決這個問題。

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

觸摸事件的類型：

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

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

標準的觸摸事件

觸摸對象屬性

IE10+的觸摸事件

MSPointerEvent屬性

等價事件

很顯然，觸摸動作序列：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. (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事件介紹的方法了嗎？如果還想學到更多技能或想了解更多相關內容，歡迎關注億速云行業資訊頻道，感謝各位的閱讀！