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

HTML5觸摸事件演化tap事件介紹，相信很多沒有經(jīng)驗(yàn)的人對(duì)此束手無策，為此本文總結(jié)了問題出現(xiàn)的原因和解決方法，通過這篇文章希望你能解決這個(gè)問題。

觸摸事件是移動(dòng)瀏覽器特有的HTML5事件，雖然click事件在pc和移動(dòng)端更通用，但是在移動(dòng)端會(huì)出現(xiàn)300ms延遲，較為影響用戶體驗(yàn)，300ms延遲來自判斷雙擊和長按，因?yàn)橹挥心J(rèn)等待時(shí)間結(jié)束以確定沒有后續(xù)動(dòng)作發(fā)生時(shí)，才會(huì)觸發(fā)click事件。所以觸摸事件反應(yīng)更快，體驗(yàn)更好。

觸摸事件的類型：

為了區(qū)別觸摸相關(guān)的狀態(tài)改變，存在多種類型的觸摸事件?？梢酝ㄟ^檢查觸摸事件的 TouchEvent.type 屬性來確定當(dāng)前事件屬于哪種類型。

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

標(biāo)準(zhǔn)的觸摸事件

觸摸對(duì)象屬性

IE10+的觸摸事件

MSPointerEvent屬性

等價(jià)事件

很顯然，觸摸動(dòng)作序列：touchstart-touchmove-touchend和鼠標(biāo)序 列：mousedown-mousemove-mouseup以及鍵盤序列：keydown-keypress-keyup很相似，這并不是巧合，因?yàn)檫@ 三種交互模式都可以描述為start-move-stop。

話說回來，click要經(jīng)過touchstart-touchmove-touchend流程，300ms延遲，所以需要tap事件，tap就是在同一個(gè)點(diǎn)輕觸時(shí)間很短。

封裝好的tap和longtap事件

XML/HTML Code復(fù)制內(nèi)容到剪貼板

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("你已經(jīng)長按了");    
   },box)

看完上述內(nèi)容，你們掌握HTML5觸摸事件演化tap事件介紹的方法了嗎？如果還想學(xué)到更多技能或想了解更多相關(guān)內(nèi)容，歡迎關(guān)注億速云行業(yè)資訊頻道，感謝各位的閱讀！