新年第一发--深入不浅出zepto的Tap击穿问题

   <p><img src="https://simg.open-open.com/show/a5ecad9d9d4b9ee9c22677e45449d710.jpg"></p>    <h2>问题来源</h2>    <p>年前去阿里面试，过程中说道了fastclick解决iPhone机器上300ms点击延迟的问题，然后就被问到了zepto的“点击穿透”的现象以及产生这个具体原因，当时回答的不是很好，主要是没有特别深入的去研究这个原因，只是知道有这个现象和问题，大概怎么解决，面试完了之后有一天突然想起来了，就决定仔细的研究下。</p>    <p>其实有好多文章都写了，内容有很多我就不重复，总结以下几点：</p>    <ol>     <li> <p>300ms延迟是由于浏览器要判断是单机还是双击造成的延迟处理点击事件</p> </li>     <li> <p>fastclick解决方式用touchstart结合touchmove以及touchend替代click事件</p> </li>     <li> <p>zepto的tap会“击穿”页面是由于既响应了自身的tap（也就是touch事件），又没有拦截掉原来的click事件，导致重复执行了2次事件，在有遮罩弹层的时候就会出现“击穿”效果。如果不太明白的话看这篇文章 <a href="/misc/goto?guid=4959737672516975641" rel="nofollow,noindex"> zepto的击穿 </a></p> </li>    </ol>    <h2>年前探究</h2>    <p>当时研究到这里时候我有一个大大的疑问就是为什么click延迟执行之后，遮罩层下面的页面的click事件会被触发，我明明点击的遮罩层的A按钮，为何下面页面的B按钮的事件会执行。按照我最初的想法，应该是继续执行A按钮的事件啊！！！此时我内心是这样的</p>    <p style="text-align:center"><img src="https://simg.open-open.com/show/3d4ede7d3f55fe16b1107035dd6b8854.jpg"></p>    <p>于是我开始探究这个问题，我搜了下大概的资料，基本都没有讲这个具体原因的，也许是我打开方式不对，反正没有找到，无奈之下，我只能翻看fastclick的源码来看它为何没有出现这个问题，然后看到了sendClick的代码，心里猛然有了一个猜想。</p>    <pre>  <code class="language-javascript">FastClick.prototype.sendClick = function(targetElement, event) {      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(this.determineEventType(targetElement), true, true, window, 1, touch.screenX, touch.screenY, touch.clientX, touch.clientY, false, false, false, false, 0, null);      clickEvent.forwardedTouchEvent = true;      targetElement.dispatchEvent(clickEvent);      };</code></pre>    <p>注意这里的initMouseEvent，当时就在想肯定和mouseEvent执行的原理有关了，到这个阶段算是有了眉目。</p>    <h2>接着搞</h2>    <p>紧接着，开始过年，过年期间享受了生活，并没有碰代码和文档（好堕落的感觉......），加上我跳槽的空档和折腾，年后稍稍稳定下来了，最近又想起了年前这探究一半的猜想，开始继续搞了起来，顺便收收心，好进入状态。</p>    <p>先说猜想--click事件最开始其实在浏览器当中被捕捉的时候，只有mouseEvent的相关属性，也就是我们平常在console.log(event)的一部分，之后，浏览器才会结合html，js产生我们常说的click时间，接着触发我们使用js绑定的函数。</p>    <p><img src="https://simg.open-open.com/show/077169e5234de6d935230f78ba8e4bfe.png"></p>    <p><strong><u>一般情况的event的各种属性</u> </strong></p>    <p>基于这个猜想，我开始翻阅 <a href="/misc/goto?guid=4959737672617758568" rel="nofollow,noindex"> mozilla </a> 和 <a href="/misc/goto?guid=4959737672713157779" rel="nofollow,noindex"> W3C </a> 的文档来了解mouseEvent。</p>    <p>翻看文档之后发现mouseEvent果然只有 screenX，screenY，clientX，clientY，ctrlKey，altKey，shiftKey，metaKey，button，buttons，EventTarget?relatedTarget。</p>    <p>其中button和buttons指的是鼠标的按钮类型，就是左键，右键，滚轮这些。用数字代替，0表示左键，1是滚轮，2是右键，其他更多功能键，都是大于2的。</p>    <p>从上面我们能看出来，其实对于mouseEvent而言，它只知道我们在屏幕的哪个位置，做了什么动作（鼠标操作），并不知道是在哪个element上面。这也就是fastclick还原用户点击事件最后做的事情。</p>    <pre>  <code class="language-javascript">clickEvent.initMouseEvent(this.determineEventType(targetElement), true, true, window, 1, touch.screenX, touch.screenY, touch.clientX, touch.clientY, false, false, false, false, 0, null);  // detremineEvenType是fastclick封装返回mouseEvent的type类型，就是click还是mouseDown</code></pre>    <p>初始化一个鼠标事件，然后dispatch这个鼠标事件。浏览器自动响应后续处理。</p>    <p>接着来看click的定义，如下图所示：</p>    <p style="text-align:center"><img src="https://simg.open-open.com/show/64aed5606eff08871f1367037f2e8e20.png"></p>    <p><strong><u>click的属性</u> </strong></p>    <p>click会多了Event.target，而且必须是一个 <a href="/misc/goto?guid=4959737672817883961" rel="nofollow,noindex"> topmost event target </a> ，在mozilla定义有些不太相同，多了currentTarget和type等。</p>    <p style="text-align:center"><img src="https://simg.open-open.com/show/091337766eaa5548ce597a2babad3c98.png"></p>    <p><strong><u>mozilla的click</u> </strong></p>    <p>先来看EventTarget的定义：EventTarget is an interface implemented by objects that can receive events and may have listeners for them.</p>    <p>Element, document, and window are the most common event targets, but other objects can be event targets too, for example XMLHttpRequest, AudioNode,AudioContext, and others.</p>    <p>从定义就能看出来了，如果是click事件必须要有一个target来承载这次鼠标事件。一般来说target要么是element要么是document，如果都没有那么就是window对象了。到这里大家应该就比较明白，这里就是浏览器的 事件机制 了。</p>    <p style="text-align:center"><img src="https://simg.open-open.com/show/db2d68efdce226a4e89f8fd6541ca2f2.png"></p>    <p><strong><u>event-flow</u> </strong></p>    <p>这里就应该是initMouseEvent之后，浏览器干的事情，来寻找是否有target来响应此次事件，如果前面一直没有target来响应，最后就会到window上，一般来说我们不会在window上做事件处理，就会没有任何响应，事件结束了。如果碰巧的事，此时有target（一般来说就是element了）来响应，那么就会执行绑定的函数了。</p>    <p>总结下整个流程：用户点击屏幕，300ms之内，浏览器拦截下这个行为，没有去真正触发相关element上绑定的click事件执行函数，而是记录操作相关数据，等待接下来的操作，由于我们使用zepto库绑定了tap事件，事件中有监听touchend触发了，立刻执行相关操作，隐藏了弹层。300ms到了，浏览器认为这次动作是click而不是dbclick，然后init一次mouseEvent在相同的屏幕位置，接着开始事件机制，发现相同位置有一个element绑定了click处理函数，执行这个函数，Over！！！穿透就是这样产生的。PS：浏览器行为部分是猜测，未验证。</p>    <p>至于解决方案：网上有很多，目前最好的是fastclick，不过fastclick也会有其他问题，例如在滑动中点击之类的。另外就是用zepto但是要preventDefault。</p>    <p>Android自己chrome已经解决了，可以用其他方式， 目前Safari也支持了，不过是在高版本上，相关讨论可以看fastclick的 issue</p>    <p> </p>    <p>来自：https://zhuanlan.zhihu.com/p/25280160</p>    <p> </p>