前端-【学习心得】-自己定义一个触摸函数

我们平时制作移动端的web项目的时候通常会使用到zept，jqmobile这样的移动端框架，他们都对触摸事件做好了封装，也就是说不论你是鼠标点击或者触摸都能得到响应。但是这些移动的框架有时候会显得过于庞大，对于性能方面也会有影响，所以最好的办法是自己定义触摸事件。

原理是首先检测浏览器的触摸函数，如果存在就使用触摸，如果不存在就使用click，下面贴出代码，代码源码出自h5触摸一书。

  (function(){           var TOUCHSTART, TOUCHEND;           //正常的触摸事件判断      if (typeof(window.ontouchstart) != ‘undefined‘) {                     TOUCHSTART = ‘touchstart‘;           TOUCHEND   = ‘touchend‘;                //微软的触摸事件      } else if (typeof(window.onmspointerdown) != ‘undefined‘) {           TOUCHSTART = ‘MSPointerDown‘;           TOUCHEND   = ‘MSPointerUp‘;      } else {           TOUCHSTART = ‘mousedown‘;           TOUCHEND   = ‘mouseup‘;      }                function NodeFacade(node){                     this._node = node;                }           NodeFacade.prototype.getDomNode = function() {           return this._node;      }           NodeFacade.prototype.on = function(evt, callback) {                     if (evt === ‘tap‘) {                this._node.addEventListener(TOUCHSTART, callback);           } else if (evt === ‘tapend‘) {                this._node.addEventListener(TOUCHEND, callback);           } else {                this._node.addEventListener(evt, callback);           }                     return this;                }      NodeFacade.prototype.off = function(evt, callback) {           if (evt === ‘tap‘) {                this._node.removeEventListener(TOUCHSTART, callback);           } else if (evt === ‘tapend‘) {                this._node.removeEventListener(TOUCHEND, callback);           } else {                this._node.removeEventListener(evt, callback);           }                     return this;      }           window.$ = function(selector) {          var node = document.querySelector(selector);          if(node) {                return new NodeFacade(node);           } else {                return null;           }      }           })();$(‘.button‘).on(‘tap‘, function(e) {      e.preventDefault();      togglePicture();      e.target.className = "active button"; }).on(‘tapend‘, function(e) {      e.target.className = "button"; });

可以看到先定义了NodeFacade的对象，这种叫做节点门面，就是说我定义好自己的事件，在最外面检测完后获得浏览器具体支持的事件，最终确定执行触摸还是点击。这里一个完整的触摸或者点击事件都是由相应的touchstart和touchend 或者mousedown,mouseup构成，只检测一次浏览器支持的事件然后返回NodeFacade对象，此时这个对象包含具体的事件类型，然后定义好此对象的On和off方法来注册和取消事件。