Use fastclick source code to parse tap

This time I will introduce to you how to use fastclick source code to parse taps and use fastclick source code to parse taps. What are the precautions?. The following is a practical case, let's take a look.

The recent use of tap events has brought me various problems. One of the problems is that to solve the problem of clicking through, we need to change the original clicks into taps. In this case, we will abandon IE users.

Of course compatibility can be done, but no one wants to touch the old code, so today I came up with fastclick,

This is the fourth time recently that we have posted about the tap-through incident. We have always been worried about solving the "click-through" mask, so today the boss proposed a library fastclick, which finally proved to solve our problem

And click does not need to be replaced with tap, so our boss said to me seriously, please don't misunderstand me, I have sent all the emails...

So I was looking at the fastclick library in the afternoon to see if it could solve our problem, so let’s get started

Read fastclick source code

Nima is too easy to use, just say:

FastClick.attach(document.body);

So all click response speeds are directly improved, just now! The problem of which input gets focus is also solved! ! ! Damn it, if it could really be done, the colleague who changed the page would definitely bite me

Let's follow step by step. The entrance is the attach method:

FastClick.attach = function(layer) {
'use strict';
return new FastClick(layer);
};

This brother just instantiated the code, so we still have to look at our constructor:

function FastClick(layer) {
'use strict';
var oldOnClick, self = this;
  this.trackingClick = false;
  this.trackingClickStart = 0;
  this.targetElement = null;
  this.touchStartX = 0;
  this.touchStartY = 0;
  this.lastTouchIdentifier = 0;
  this.touchBoundary = 10;
  this.layer = layer;
  if (!layer || !layer.nodeType) {
   throw new TypeError('Layer must be a document node');
  }
  this.onClick = function() { return FastClick.prototype.onClick.apply(self, arguments); };
  this.onMouse = function() { return FastClick.prototype.onMouse.apply(self, arguments); };
  this.onTouchStart = function() { return FastClick.prototype.onTouchStart.apply(self, arguments); };
  this.onTouchMove = function() { return FastClick.prototype.onTouchMove.apply(self, arguments); };
  this.onTouchEnd = function() { return FastClick.prototype.onTouchEnd.apply(self, arguments); };
  this.onTouchCancel = function() { return FastClick.prototype.onTouchCancel.apply(self, arguments); };
  if (FastClick.notNeeded(layer)) {
   return;
  }
  if (this.deviceIsAndroid) {
   layer.addEventListener('mouseover', this.onMouse, true);
   layer.addEventListener('mousedown', this.onMouse, true);
   layer.addEventListener('mouseup', this.onMouse, true);
  }
  layer.addEventListener('click', this.onClick, true);
  layer.addEventListener('touchstart', this.onTouchStart, false);
  layer.addEventListener('touchmove', this.onTouchMove, false);
  layer.addEventListener('touchend', this.onTouchEnd, false);
  layer.addEventListener('touchcancel', this.onTouchCancel, false);
 
  if (!Event.prototype.stopImmediatePropagation) {
   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);
    }
   };
  }
  if (typeof layer.onclick === 'function') {
   oldOnClick = layer.onclick;
   layer.addEventListener('click', function(event) {
 oldOnClick(event);
 }, false);
 layer.onclick = null;
}
}

Look at this code, I don’t know what many of the attributes above do...so I ignored it

if (!layer || !layer.nodeType) {
throw new TypeError('Layer must be a document node');
}

It should be noted here that we must pass in a node to the constructor, otherwise problems will occur

Then this guy registered some basic mouse events in his own attribute methods. We will talk about the details later

There is a notNeeded method at the back:

 FastClick.notNeeded = function(layer) {
  'use strict';
  var metaViewport;
  if (typeof window.ontouchstart === 'undefined') {
   return true;
  }
  if ((/Chrome\/[0-9]+/).test(navigator.userAgent)) {
   if (FastClick.prototype.deviceIsAndroid) {
    metaViewport = document.querySelector('meta[name=viewport]');
    if (metaViewport && metaViewport.content.indexOf('user-scalable=no') !== -1) {
     return true;
    }
   } else {
    return true;
   }
  }
  if (layer.style.msTouchAction === 'none') {
   return true;
  }
  return false;
 };

This method is used to determine whether fastclick is needed. The meaning of the comment is not clear. Let’s take a look at the code

The first sentence:

if (typeof window.ontouchstart === 'undefined') {
 return true;
}

If the touchstart event is not supported, return true
PS: The current feeling is that fastclick should also be simulated by touch events, but it does not have the click-through problem

Later, I also determined some problems with Android, but I won’t pay attention to them here. It means that it should only support touch, so I returned to the main code

In the main code, we see that if the browser does not support touch events or has other problems, it will jump out directly

Then there is an attribute of deviceIsAndroid, let’s take a look (in fact, you can tell whether it is an android device without looking at it)

FastClick.prototype.deviceIsAndroid = navigator.userAgent.indexOf('Android') > 0;

Binding event

Okay, this guy started to bind registration events, and so far I haven’t seen anything strange

 if (this.deviceIsAndroid) {
  layer.addEventListener('mouseover', this.onMouse, true);
  layer.addEventListener('mousedown', this.onMouse, true);
  layer.addEventListener('mouseup', this.onMouse, true);
 }
 layer.addEventListener('click', this.onClick, true);
 layer.addEventListener('touchstart', this.onTouchStart, false);
 layer.addEventListener('touchmove', this.onTouchMove, false);
 layer.addEventListener('touchend', this.onTouchEnd, false);
 layer.addEventListener('touchcancel', this.onTouchCancel, false);

The specific event function has been rewritten in the front. Let's ignore it for now and continue to look at it later (in other words, this guy has bound enough events)

stopImmediatePropagation

Finished with one more attribute:

Prevents the bubbling behavior of the current event and prevents the continued execution of the event processing function of all events of the same type on the element where the current event is located.

If an element has multiple event listening functions for the same type of event, when an event of that type is triggered, the multiple event listening functions will be executed in sequence. If a listening function is executed event.stopImmediatePropagation() method, in addition to the bubbling behavior of the event being blocked (the role of the event.stopPropagation method), the execution of other listening functions of the same type of events bound to the element will also be blocked.

 
     
         <style>
             p { height: 30px; width: 150px; background-color: #ccf; }
             p {height: 30px; width: 150px; background-color: #cfc; }
         </style>
     
     
         <p>
             </p><p>paragraph</p>
         
         <script>
             document.querySelector("p").addEventListener("click", function(event)
             {
                 alert("我是p元素上被绑定的第一个监听函数");
             }, false);
             document.querySelector("p").addEventListener("click", function(event)
             {
                 alert("我是p元素上被绑定的第二个监听函数");
                 event.stopImmediatePropagation();
                 //执行stopImmediatePropagation方法,阻止click事件冒泡,并且阻止p元素上绑定的其他click事件的事件监听函数的执行.
             }, false);
             document.querySelector("p").addEventListener("click", function(event)
             {
                 alert("我是p元素上被绑定的第三个监听函数");
                 //该监听函数排在上个函数后面,该函数不会被执行.
             }, false);
             document.querySelector("p").addEventListener("click", function(event)
             {
                 alert("我是p元素,我是p元素的上层元素");
                 //p元素的click事件没有向上冒泡,该函数不会被执行.
             }, false);
         </script>
     
 

rrree

Then this guy redefined the method of registering and canceling events,

Let’s look at the registration event first, which uses Node’s addEventListener. What is this Node?

From this point of view, Node is a system property, representing our node, so the logout event is rewritten here

这里，我们发现，其实他只对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>
 <input>
 $('#addEvent').click(function () {
     var dom = $('#addEvent1')[0]
     dom.addEventListener('click', function () {
         alert('')
         var s = '';
     })
 });

我们来这个断点看看我们点击后干了什么，我们现在点击按钮1会为按钮2注册事件：

但是很遗憾，我们在电脑上不能测试，所以增加了我们读代码的困难，在手机上测试后，发现按钮2响应很快，但是这里有点看不出问题

最后alert了一个!Event.prototype.stopImmediatePropagation发现手机和电脑都是false，所以我们上面搞的东西暂时无用

 FastClick.prototype.onClick = function (event) {
     'use strict';
     var permitted;
     alert('终于尼玛进来了');
     if (this.trackingClick) {
         this.targetElement = null;
         this.trackingClick = false;
         return true;
     }
     if (event.target.type === 'submit' && event.detail === 0) {
         return true;
     }
     permitted = this.onMouse(event);
     if (!permitted) {
         this.targetElement = null;
     }
     return permitted;
 };

然后我们终于进来了，现在我们需要知道什么是trackingClick 了

/**
* Whether a click is currently being tracked.
* @type Boolean
*/
this.trackingClick = false;

我们最初这个属性是false，但是到这里就设置为true了，就直接退出了，说明绑定事件终止，算了这个我们暂时不关注，我们干点其它的，

因为，我觉得重点还是应该在touch事件上

PS：到这里，我们发现这个库应该不只是将click加快，而是所有的响应都加快了

我在各个事件部分log出来东西，发现有click的地方都只执行了touchstart与touchend，于是至此，我觉得我的观点成立
他使用touch事件模拟量click，于是我们就只跟进这一块就好：

 FastClick.prototype.onTouchStart = function (event) {
     'use strict';
     var targetElement, touch, selection;
     log('touchstart');
     if (event.targetTouches.length > 1) {
         return true;
     }
     targetElement = this.getTargetElementFromEventTarget(event.target);
     touch = event.targetTouches[0];
     if (this.deviceIsIOS) {
         selection = window.getSelection();
         if (selection.rangeCount && !selection.isCollapsed) {
             return true;
         }
         if (!this.deviceIsIOS4) {
             if (touch.identifier === this.lastTouchIdentifier) {
                 event.preventDefault();
                 return false;
             }
             this.lastTouchIdentifier = touch.identifier;
             this.updateScrollParent(targetElement);
         }
     }
     this.trackingClick = true;
     this.trackingClickStart = event.timeStamp;
     this.targetElement = targetElement;
     this.touchStartX = touch.pageX;
     this.touchStartY = touch.pageY;
     if ((event.timeStamp - this.lastClickTime) <p style="text-align: left;">
		其中用到了一个方法：	</p><pre class="brush:php;toolbar:false">FastClick.prototype.getTargetElementFromEventTarget = function (eventTarget) {
  'use strict';
  if (eventTarget.nodeType === Node.TEXT_NODE) {
    return eventTarget.parentNode;
  }
  return eventTarget;
};

他是获取我们当前touchstart的元素

然后将鼠标的信息记录了下来，他记录鼠标信息主要在后面touchend时候根据x、y判断是否为click
是ios情况下还搞了一些事情，我这里跳过去了

然后这里记录了一些事情就跳出去了，没有特别的事情，现在我们进入我们的出口touchend

 FastClick.prototype.onTouchEnd = function (event) {
     'use strict';
     var forElement, trackingClickStart, targetTagName, scrollParent, touch, targetElement = this.targetElement;
     log('touchend');
     if (!this.trackingClick) {
         return true;
     }
     if ((event.timeStamp - this.lastClickTime)  100 || (this.deviceIsIOS && window.top !== window && targetTagName === 'input')) {
             this.targetElement = null;
             return false;
         }
         this.focus(targetElement);
         if (!this.deviceIsIOS4 || targetTagName !== 'select') {
             this.targetElement = null;
             event.preventDefault();
         }
         return false;
     }
     if (this.deviceIsIOS && !this.deviceIsIOS4) {
         scrollParent = targetElement.fastClickScrollParent;
         if (scrollParent && scrollParent.fastClickLastScrollTop !== scrollParent.scrollTop) {
             return true;
         }
     }
     if (!this.needsClick(targetElement)) {
         event.preventDefault();
         this.sendClick(targetElement, event);
     }
     return false;
 };

这个家伙洋洋洒洒干了许多事情

这里纠正一个错误，他onclick那些东西现在也执行了......可能是我屏幕有变化（滑动）导致

if ((event.timeStamp - this.lastClickTime) <p style="text-align: left;">
		这个代码很关键，我们首次点击会执行下面的逻辑，如果连续点击就直接完蛋，下面的逻辑丫的不执行了......<br>这个不执行了，那么这个劳什子又干了什么事情呢？<br>事实上下面就没逻辑了，意思是如果确实点击过快，两次点击只会执行一次，这个阀值为200ms，这个暂时看来是没有问题的	</p><p style="text-align: left;">
		好了，我们继续往下走，于是我意识到又到了一个关键点<br>因为我们用tap事件不能使input获得焦点，但是fastclick却能获得焦点，这里也许是一个关键，我们来看看几个与获取焦点有关的函数	</p><pre class="brush:php;toolbar:false"> FastClick.prototype.focus = function (targetElement) {
     'use strict';
     var length;
     if (this.deviceIsIOS && targetElement.setSelectionRange) {
         length = targetElement.value.length;
         targetElement.setSelectionRange(length, length);
     } else {
         targetElement.focus();
     }
 };

setSelectionRange是我们的关键，也许他是这样获取焦点的......具体我还要下来测试，留待下次处理吧
然后下面如果时间间隔过长，代码就不认为操作的是同一dom结构了

最后迎来了本次的关键：sendClick，无论是touchend还是onMouse都会汇聚到这里

 FastClick.prototype.sendClick = function (targetElement, event) {
     'use strict';
     var clickEvent, touch;
     // On some Android devices activeElement needs to be blurred otherwise the synthetic click will have no effect (#24)
     if (document.activeElement && document.activeElement !== targetElement) {
         document.activeElement.blur();
     }
     touch = event.changedTouches[0];
     // Synthesise a click event, with an extra attribute so it can be tracked
     clickEvent = document.createEvent('MouseEvents');
     clickEvent.initMouseEvent('click', true, true, window, 1, touch.screenX, touch.screenY, touch.clientX, touch.clientY, false, false, false, false, 0, null);
     clickEvent.forwardedTouchEvent = true;
     targetElement.dispatchEvent(clickEvent);
 };

他创建了一个鼠标事件，然后dispatchEvent事件（这个与fireEvent类似）

 //document上绑定自定义事件ondataavailable
 document.addEventListener('ondataavailable', function (event) {
 alert(event.eventType);
 }, false);
 var obj = document.getElementById("obj");
 //obj元素上绑定click事件
 obj.addEventListener('click', function (event) {
 alert(event.eventType);
 }, false);
 //调用document对象的 createEvent 方法得到一个event的对象实例。
 var event = document.createEvent('HTMLEvents');
 // initEvent接受3个参数：
 // 事件类型，是否冒泡，是否阻止浏览器的默认行为
 event.initEvent("ondataavailable", true, true);
 event.eventType = 'message';
 //触发document上绑定的自定义事件ondataavailable
 document.dispatchEvent(event);
 var event1 = document.createEvent('HTMLEvents');
 event1.initEvent("click", true, true);
 event1.eventType = 'message';
 //触发obj元素上绑定click事件
 document.getElementById("test").onclick = function () {
 obj.dispatchEvent(event1);
 };

至此，我们就知道了，我们为dom先绑定了鼠标事件，然后touchend时候触发了，而至于为什么本身注册的click未触发就要回到上面代码了

解决“点透”（成果）

有了这个思路，我们来试试我们抽象出来的代码：

 nbsp;html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 
 
     <title></title>
     <meta>
     <style>
         #list { display: block; position: absolute; top: 100px; left: 10px; width: 200px; height: 100px; }
         p { display: block; border: 1px solid black; height: 300px; width: 100%; }
         #input { width: 80px; height: 200px; display: block; }
     </style>
 
 
     <p>
     </p>
     <p>
         </p><p>
             <input>
         </p>
     
     <script>
         var el = null;
         function getEvent(el, e, type) {
             e = e.changedTouches[0];
             var event = document.createEvent(&#39;MouseEvents&#39;);
             event.initMouseEvent(type, true, true, window, 1, e.screenX, e.screenY, e.clientX, e.clientY, false, false, false, false, 0, null);
             event.forwardedTouchEvent = true;
             return event;
         }
         list.addEventListener(&#39;touchstart&#39;, function (e) {
             var firstTouch = e.touches[0]
             el = firstTouch.target;
             t1 = e.timeStamp;
         })
         list.addEventListener(&#39;touchend&#39;, function (e) {
             e.preventDefault();
             var event = getEvent(el, e, &#39;click&#39;);
             el.dispatchEvent(event);
         })
         var list = document.getElementById(&#39;list&#39;);
         list.addEventListener(&#39;click&#39;, function (e) {
             list.style.display = &#39;none&#39;;
             setTimeout(function () {
                 list.style.display = &#39;&#39;;
             }, 1000);
         })
     </script>
 
 

这样的话，便不会点透了，这是因为zepto touch事件全部绑定值document，所以 e.preventDefault();无用
结果我们这里是直接在dom上，e.preventDefault();
便起了作用不会触发浏览器默认事件，所以也不存在点透问题了，至此点透事件告一段落......

帮助理解的图

代码在公司写的，回家后不知道图上哪里了，各位将就看吧

为什么zepto会点透/fastclick如何解决点透

我最开始就给老大说zepto处理tap事件不够好，搞了很多事情出来

因为他事件是绑定到document上，先touchstart然后touchend，根据touchstart的event参数判断该dom是否注册了tap事件，有就触发

于是问题来了，zepto的touchend这里有个event参数，我们event.preventDefault()，这里本来都是最上层了，这就代码压根没什么用

但是fastclick处理办法不可谓不巧妙，这个库直接在touchend的时候就触发了dom上的click事件而替换了本来的触发时间

意思是原来要350-400ms执行的代码突然就移到了50-100ms，然后这里虽然使用了touch事件但是touch事件是绑定到了具体dom而不是document上

所以e.preventDefault是有效的，我们可以阻止冒泡，也可以阻止浏览器默认事件，这个才是fastclick的精华部分，不可谓不高啊！！！

整个fastclick代码读来醍醐灌顶，今天收获很大，在此记录

后记

上面的说法有点问题，这修正一下：

首先，我们回到原来的zepto方案，看看他有什么问题：

因为js标准本不支持tap事件，所以zepto tap是touchstart与touchend模拟而出  zepto在初始化时便给document绑定touch事件，在我们点击时根据event参数获得当前元素，并会保存点下和离开时候的鼠标位置  根据当前元素鼠标移动范围判断是否为类点击事件，如果是便触发已经注册好的tap事件

然后fastclick处理比较与zepto基本一致，但是又有所不同

fastclick是将事件绑定到你传的元素（一般是document.body）

② 在touchstart和touchend后（会手动获取当前点击el），如果是类click事件便手动触发了dom元素的click事件

所以click事件在touchend便被触发，整个响应速度就起来了，触发实际与zepto tap一样

好了，为什么基本相同的代码，zepto会点透而fastclick不会呢？

原因是zepto的代码里面有个settimeout，而就算在这个代码里面执行e.preventDefault()也不会有用

这就是根本区别，因为settimeout会将优先级较低

有了定期器，当代码执行到setTimeout的时候， 就会把这个代码放到JS的引擎的最后面 

而我们代码会马上检测到e.preventDefault，一旦加入settimeout，e.preventDefault便不会生效，这是zepto点透的根本原因

相信看了本文案例你已经掌握了方法，更多精彩请关注php中文网其它相关文章！

推荐阅读：

Vue.js怎样把递归组件构建为树形菜单

Parcel.js Vue 2.x quick configuration packaging method

The above is the detailed content of Use fastclick source code to parse tap. For more information, please follow other related articles on the PHP Chinese website!