通过fastclick源码分析彻底解决tap“点透”(5)

日期：2020-05-11 栏目：程序人生浏览：次

layer.removeEventListener = function(type, callback, capture) {
   var rmv = Node.prototype.removeEventListener;
   if (type === 'click') {
    rmv.call(layer, type, callback.hijacked || callback, capture);
   } else {
    rmv.call(layer, type, callback, capture);
   }
};

layer.addEventListener = function(type, callback, capture) {
   var adv = Node.prototype.addEventListener;
   if (type === 'click') {
    adv.call(layer, type, callback.hijacked || (callback.hijacked = function(event) {
     if (!event.propagationStopped) {
      callback(event);
     }
    }), capture);
   } else {
    adv.call(layer, type, callback, capture);
   }
};
}

然后这家伙重新定义了下注册与注销事件的方法，

我们先看注册事件，其中用到了Node的addEventListener，这个Node是个什么呢？

由此观之，Node是一个系统属性，代表我们的节点吧，所以这里重写了注销的事件

这里，我们发现，其实他只对click进行了特殊处理

adv.call(layer, type, callback.hijacked || (callback.hijacked = function(event) {
if (!event.propagationStopped) {
 callback(event);
}
}), capture);

其中有个hijacked劫持是干神马的就暂时不知道了，估计是在中间是否改写的意思吧
然后这里重写写了下，hijacked估计是一个方法，就是为了阻止在一个dom上注册多次事件多次执行的情况而存在的吧

注销和注册差不多我们就不管了，到此我们其实重写了我们传入dom的注册注销事件了，好像很厉害的样子，意思以后这个dom调用click事件用的是我们的，当然这只是我暂时的判断，具体还要往下读，而且我觉得现在的判断不靠谱，于是我们继续吧

我们注销事件时候可以用addEventListener 或者 dom.onclick=function(){}，所以这里有了下面的代码：

if (typeof layer.onclick === 'function') {
 oldOnClick = layer.onclick;
 layer.addEventListener('click', function(event) {
 oldOnClick(event);
 }, false);
 layer.onclick = null;
}

此处，他的主干流程居然就完了，意思是他所有的逻辑就在这里了，不论入口还是出口应该就是事件注册了，于是我们写个代码来看看

测试入口

 <input type="button" value="addevent">
 <input type="button" value="addevent1">

 $('#addEvent').click(function () {
     var dom = $('#addEvent1')[0]
     dom.addEventListener('click', function () {

转载注明出处：http://www.heiqu.com/155.html

通过fastclick源码分析彻底解决tap“点透”(5)

相关推荐