移动端点击穿透原理
当同时绑定 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
