移动端的传统click事件延迟和点透现象

一、场景描述：

1.A/B两个层上下z轴重叠。

2.上层的A点击后消失或移开。（这一点很重要）

3.B元素本身有默认click事件（如a标签） 或 B绑定了click事件。

在以上情况下，点击A/B重叠的部分，就会出现点透的现象。

二、点透现象的分析

在移动端不使用click而用touch事件代替触摸是因为click事件有着300ms的延迟，事件触发的顺序：

touchstart——touchmove——touchend——click

touchstart：在这个DOM（或冒泡到这个DOM）上手指触摸开始即能立即触发

click：在这个DOM（或冒泡到这个DOM）上手指触摸开始，且手指未曾在屏幕上移动，且在这个在这个dom上手指离开屏幕，且触摸和离开屏幕之间的间隔时间较短（某些浏览器不检测间隔时间，也会触发click）才能触发

由于我们在touchstart阶段就已经隐藏了罩层A，当click被触发时候，能够被点击的元素则是其下的B元素，根据click事件的触发规则：

只有在被触发时，当前有click事件的元素显示，且在面朝用户的最前端时，才触发click事件。

由于B绑定了click事件（或者B本身默认存在click事件），所以B的click事件被触发，产生了点透的情况。

三、有什么解决方案呢

1、在处理一下弹层、遮罩层的显示于隐藏，可以优先考虑用click事件，因为click刚好的延迟，在这种交互下反而会有疑似更好的用户体验

2、如果对于B元素本身没有默认click事件的情况（无a标签等），应统一使用touch事件，统一代码风格，并且由于click事件在移动端的延迟要大很多，不利于用户体验，所以关于触摸事件应尽量使用touch相关事件。

3、对于B元素本身存在默认click事件的情况,应及时取消A元素的默认点击事件（e.preventDefault()），从而阻止click事件的产生，但是这种方式对于链接的默认点击事件并不好处理

4、利用库类解决，比如新版的zeptotap事件、fastclick（https://github.com/ftlabs/fastclick ）、hammer等通用库。

注：所谓的 tap 事件由 touchstart 事件 + touchmove 判断 + touchend 事件封装组成