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事件介绍的方法了吗？如果还想学到更多技能或想了解更多相关内容，欢迎关注亿速云行业资讯频道，感谢各位的阅读！