点击穿透现象有3种：
点击穿透问题：
点击蒙层(mask)上的关闭按钮，蒙层消失后发现触发了按钮下面元素的click事件跨页面点 击穿透问题：如果按钮下面恰好是一个有href属性的a标签，那么页面就会发生跳转另一种 跨页面点击穿透问题：这次没有mask 了 ,直接点击页内按钮跳转至新页，然后发现新页面中 对应位置元素的click事件被触发了
解决方案：
1、 只用 touch
最简单的解决方案，完美解决点击穿透问题
把页面内所有 click 全部换成 touch 事件(touchstart、’ touchend’、’ tap’)
2、 只用 click
下下策，因为会带来300ms延迟，页面内任何一个自定义交互都将增加300毫秒延迟
3、 tap后延迟350ms再隐藏mask
改动最小，缺点是隐藏mask变慢了，350ms还是能感觉到慢的
4、 pointer-events
比较麻烦且有缺陷，不建议使用mask隐藏后，给按钮下面元素添上pointer-events： none； 样式，让click穿过去，350ms后去掉这个样式，恢复响应缺陷是mask消失后的的350ms内， 用户可以看到按钮下面的元素点着没反应，如果用户手速很快的话一定会发现
Was this helpful?
0 / 0