移动端点击穿透和click事件300ms延迟问题

详细解析-移动H5点击穿透现象

300 毫秒点击延迟的来龙去脉

场景描述（类似）：

一个页面里存在A元素和B元素；B元素浮在A元素之上，A元素里具有a标签或者绑定了点击事件或表单元素；点击B元素后，隐藏或者删除B元素；再B元素隐藏或者删除的同时触发A元素里的a标签或者点击事件；点击穿透的现象发生；

问题产生的原因分析：

当我们在触屏上点击某个位置时候的时候，浏览器依次响应产生了几个事件，它们分别是:touchStart、touchEnd、click 事件，且click具有300毫秒的延迟时间。注意：即使你没有监听事件，事件依然存在的，浏览器默认行为。当单击B元素时候，事件触发先后顺序是先touchestart->touchend->click , 问题将在这里出现。

当发生了单击事件后，touchstart事件先执行B元素被隐藏了，接下来到touchend事件由于速度很快，所以A元素并没有响应；此时click事件由于延迟了300ms才执行，B元素已经隐藏，click单击发生了，由于没有了B元素，浏览器实现上会认为当次单击是对页面上的某个部分实行的，A元素里相应的位置的地方（元素）响应了click事件。于是就出现了穿透现象；

注：

给B元素绑定click事件 (点击访问DEMO) —— 不会穿透；

给B元素绑定touchstart事件 (点击访问DEMO) ——出现穿透现象

给B元素绑定touchend事件 (点击访问DEMO) ——出现穿透现象

移动端click事件300毫秒延迟：

用户在 iOS Safari 里边点击了一个链接。由于用户可以进行双击缩放或者双击滚动的操作，当用户一次点击屏幕之后，浏览器并不能立刻判断用户是确实要打开这个链接，还是想要进行双击操作。因此，iOS Safari 就等待 300 毫秒，以判断用户是否再次点击了屏幕。（几乎现在所有的移动端浏览器都有这个双击操作的功能，所以...）