移动端点击穿透问题解决

移动端点击穿透原理

当同时绑定 touchstart、touchend、click 三个事件的时候，触发的先后顺序是：touchstart -> touchend -> click。正是由于这种 click 事件的滞后性设计从而会产生事件穿透（点击穿透）问题。

移动端 click 事件点击会有 300ms 延迟问题，但是 touchstart  touchend 不会延迟，当这几个事件同时绑定的时候，则会导致三个事件回调函数执行的逻辑无法同时进行，从而产生了 300ms 时间差。

在实际项目开发中，纯移动端项目优先推荐禁用 click 事件的方法，多端项目优先推荐禁用 touch 事件的方法。

js 解决方案

1、只用touch

把页面内所有click全部换成touch事件（touchstart、touchend、tap）,需要特别注意a标签，a标签的href也是click，需要去掉换成js控制的跳转，或者直接改成span+tap控制跳转。如果要求不高，不在乎滑走或者滑进来触发事件的话，span+touchend就可以了。毕竟tap需要引入第三方库

不用a标签其实没什么，移动app开发不用考虑SEO，即便用了a标签，一般也会去掉所有默认样式，不如直接用span

2、只是用click

下下策，因为带来300ms延迟，页面内任何一个点击都将增加300ms延迟，想想都慢

不用touch就不会存在touch之后300ms触发click的问题，如果交互性要求不高可以这么做， 强烈不推荐 ，快一点总是好的

3、拿个东西来挡住

比较笨的方法，不推荐用

4、tap后延迟350ms再隐藏mask

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

只需要针对mask做处理就行，改动非常小，如果要求不高的话，用这个比较省力

css 解决方案

5、pointer-events

比较麻烦且有缺陷，不建议使用

mask隐藏后，给按钮下面元素添加上pointer-events：none;样式，让click穿过去，350ms后去掉这个样式，恢复响应

缺陷是mask消失后的的350ms内，用户可以看到按钮下面的元素点着没反应，如果用户手速很快的话一定会发现

在下面元素的事件处理器里做检测（配合全局flag）

原文链接：http://www.shouhuola.com/q-24073.html

参考链接：https://www.cnblogs.com/jofun/p/13371431.html