延迟原因

早期在iPhone的Safari浏览器中，为了实现双击放大效果，当用户点击屏幕时会判断在300ms内(注意：300ms是在touchend之后)是否有第二次点击，如果有就是双击，如果没就是单击，触发click事件。此过程可拆解为：touchstart->touchmove->touchend->click

解决思路

touchstart/touchend是没有延迟的，可以用touchend来模拟快速点击行为。zepto的tap或fastclick.js都是这个原理，只是zepto的tap事件统一在document的touchend时触发的。

延迟导致问题及解决方法

• zepto tap穿透
  • 现象描述：遮罩层中有一个标签绑定tap事件，触发此事件遮罩层消失，该标签下方有一个绑定click事件的元素。当点击上层标签时，同时也触发下层元素的click事件。
  • 原因：touchend后继续等待300ms发现没有其他行为了，则继续触发click，由于这时遮罩层已经消失，所以当前click事件的target就在底层元素上。
  • 解决方法：
    • 直接将上层元素的tap事件换成click事件（会出现300ms的延迟触发事件）。
    • 可以给元素的消失做一个fade效果，类似jQuery里的fadeOut，并设置动画duration大于300ms，这样当延迟的 click 触发时，就不会“穿透”到下方的元素了。
    • 使用
• H5页面click事件反映迟钝：使用

$(function() {	FastClick.attach(document.body);});复制代码