手机端 click 事件 300ms 左右延迟

延迟缘由

早期在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 触发时，就不会“穿透”到下方的元素了。
    • 使用fastclick.js
• H5页面click事件反映迟钝：使用fastclick.js

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

参考连接