sunha1yang / blog Goto Github PK

移动页面点击穿透问题解决方案

移动端点击穿透现象：

1. 点击穿透问题：点击遮罩层mask上的关闭按钮，蒙层消失后发现触发了按钮下面元素的click事件。
2. 跨页面点击穿透问题：如果按钮下面恰好是一个有href属性的a标签，那么页面就会发生跳转。
3. 跨页面点击穿透问题：直接点击页内按钮跳转至新页，然后发现新页面中对应位置元素的click事件被触发
   触发的原因：js控制页面跳转的逻辑如果是绑定在touch事件上的，而且新页面中对应位置的元素绑定的是click事件，而且页面在300ms内完成了跳转就会触发此现象。

解决办法：

1. 只用touch
2. 只用click
   • 副作用：因为会带来300ms延迟，页面内任何一个自定义交互都将增加300毫秒延迟
3. tap后延迟350ms再隐藏mask
4. pointer-events
   • 实现方式：mask隐藏后，给按钮下面元素添上pointer-events: none;样式，让click穿过去，350ms后去掉这个样式，恢复响应
   • 副作用：mask消失后的的350ms内，按钮下面的元素点着击没反应
5. 引入fastclick
   • 副作用：引入额外的库，多加载几kb资源