在移动端，单击穿透是什么？

单击穿透现象有3种。

• 单击穿透问题：单击蒙层（mask）上的“关闭”按钮，蒙层消失后，发现触发了按钮下面元素的 click事件。

• 页面单击穿透问题：如果按钮下面恰妤是一个有href属性的a标签，那么页面就会发生跳转。

• 跨页面单击穿透问题：这次没有蒙层了，直接单击页内按钮跳转至新页，然后发现新页面中对应位置元素的 click事件被触发了。

有4种解决方案。

（1）只用 touch。

这是最简单的解决方案，完美解决单击穿透问题，把页面内所有 click都换成 touch事件（ touchstart、 touched、tap）。

（2）只用 click

因为单击会带来300ms的延迟，所以页面内任何一个自定义交互都将增加300ms的延迟。

（3）轻触〔tap）后延迟350ms再隐藏蒙层。

改动最小，缺点是隐藏蒙层变慢了，350ms还是能感觉到慢的。

（4）添加 pointer-events:none样式。

这比较麻烦且有缺陷，不建议使用。蒙层隐藏后，给按钮下面的元素添上pointer-events:none样式，让 click穿过去，350ms后去掉这个样式。恢复响应的缺陷是蒙层消失后的350ms内，用户单击按钮下面的元素没反应，如果用户单击速度很快，一定会发现。