聊聊click延迟和点击穿透
博客原文地址：Claiyre的个人博客 https://claiyre.github.io/
如需转载，请在文章开头注明原文地址
移动端click事件被延迟
移动端的开发经常需要监听用户的双击行为，所以在touchend事件之后会有300ms左右的延迟，用来判断是否有双击事件。
因为这种延迟，所以我们在移动端通常不监听click事件。
移动端的事件的发生顺序是这样的：touchstart---touchmove---touchend,然后大约过300ms触发click事件
tap事件
zepto这个库解决click延迟的思路是：自定义tap事件，当用户点击元素时，touchend事件会先于click发生，当touchend冒泡到document时触发目标元素的tap事件
所以我们可以通过监听tap事件代替监听click事件。
但需要注意的是，tap事件并不是
点击穿透
在我们常见的弹出层这种情况下，点击关闭弹出层时可能会发生穿透现象。
那为什么会出现点击穿透这种现象呢
因为当tap事件发生时，上层遮罩层关闭，此时事件只进行到了touchend,而click大约在300ms后才触发，当click触发时，上面的遮罩层已经消失，这就相当于点击了到了下层的元素
如果这个元素绑定了click事件，或者有默认的点击行为，比如a标签和input等等，那么就会触发他们的click行为。
这就是点击穿透事件。
如何解决点击穿透
1.直接将上层的tap事件换成click
代价就是有300ms的延迟，但毕竟这个按钮用户也就关闭时点一下，所以影响不大
2.在click事件发生前阻止它
具体做法是在touchend的事件处理函数中使用e.preventDefault()来阻止后续的click事件。
3.使用css3的一个新特性：pointer-events
pointer-events:none 可以彻底屏蔽鼠标事件，所以可以给点击按钮这个属性，然后就可以放心大胆地使用tap事件或者touchend啦
