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

落日映苍穹つ 2022-07-17 00:45 214阅读 0赞

## 一.click与300ms延迟 ##

移动浏览器提供一个特殊的功能：双击（double tap）放大

300ms的延迟就来自这里，用户碰触页面之后，需要等待一段时间来判断是不是双击（double tap）动作，而不是立即响应单击（click），等待的这段时间大约是300ms。之前有过简单介绍：[黯羽轻扬：HTML5触摸事件][HTML5]

移动事件提供了`touchstart`、`touchmove`、`touchend`却没有提供tap支持，主流框架（库）都是手动实现了自定义tap事件，以求消除300ms延迟，提高页面响应速度。对于简单的页面，可以把`touchstart`或者`touchend`当作tap来用，但存在一些问题，比如手指接触目标元素，按住不放，慢慢移出响应区域，会触发`touchstart`事件执行对应的事件处理器（本不应该触发），`touchend`事件也存在类似的问题。

此外，使用原生touch事件也存在点击穿透的问题，因为click是在touch系列事件发生后大约300ms才触发的，混用touch和click肯定会导致点透问题，下面详细介绍

## 二.点击穿透问题 ##

点击穿透现象有3种：

*  点击穿透问题：点击蒙层（mask）上的关闭按钮，蒙层消失后发现触发了按钮下面元素的click事件
    
    蒙层的关闭按钮绑定的是touch事件，而按钮下面元素绑定的是click事件，touch事件触发之后，蒙层消失了，300ms后这个点的click事件fire，event的target自然就是按钮下面的元素，因为按钮跟蒙层一起消失了
 *  跨页面点击穿透问题：如果按钮下面恰好是一个有href属性的a标签，那么页面就会发生跳转
    
    因为a标签跳转默认是click事件触发，所以原理和上面的完全相同
 *  另一种跨页面点击穿透问题：这次没有mask了，直接点击页内按钮跳转至新页，然后发现新页面中对应位置元素的click事件被触发了
    
    和蒙层的道理一样，js控制页面跳转的逻辑如果是绑定在touch事件上的，而且新页面中对应位置的元素绑定的是click事件，而且页面在300ms内完成了跳转，三个条件同时满足，就出现这种情况了

非要细分的话还有第四种，不过概率很低，就是新页面中对应位置元素恰好是a标签，然后就发生连续跳转了。。。诸如此类的，都是点击穿透问题

## 三.解决方案 ##

问题已经很明了了，有很多解决方案，但思路不外乎2种：

1.  不要混用touch和click
    
    既然touch之后300ms会触发click，只用touch或者只用click就自然不会存在问题了
2.  吃掉（或者说是消费掉）touch之后的click
    
    依旧用tap，只是在可能发生点击穿透的情形做额外的处理，拿个东西来挡住、或者tap后延迟350毫秒再隐藏mask、pointer-events、在下面元素的事件处理器里做检测（配合全局flag）等等，能吃掉就行

详细解决方案：

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延迟，页面内任何一个自定义交互都将增加300毫秒延迟，想想都慢
    
    不用touch就不会存在touch之后300ms触发click的问题，如果交互性要求不高可以这么做，强烈不推荐，快一点总是好的
3.  拿个东西来挡住
    
    比较笨的方法，千万不要用
    
    叶小钗的“菊花”大法，更多信息请查看[【移动端兼容问题研究】javascript事件机制详解（涉及移动兼容）][javascript]
4.  tap后延迟350ms再隐藏mask
    
    改动最小，缺点是隐藏mask变慢了，350ms还是能感觉到慢的
    
    只需要针对mask做处理就行，改动非常小，如果要求不高的话，用这个比较省力
5.  pointer-events
    
    比较麻烦且有缺陷，不建议使用
    
    mask隐藏后，给按钮下面元素添上`pointer-events: none;`样式，让click穿过去，350ms后去掉这个样式，恢复响应
    
    缺陷是mask消失后的的350ms内，用户可以看到按钮下面的元素点着没反应，如果用户手速很快的话一定会发现
6.  在下面元素的事件处理器里做检测（配合全局flag）
    
    比较麻烦，不建议使用
    
    全局flag记录按钮点击的位置（坐标点），在下面元素的事件处理器里判断event的坐标点，如果相同则是那个可恶的click，拒绝响应
    
    上面说的只是想法，没测试过，实在不行就用记录时间戳判断，等待350ms，这样就和`pointer-events`差不多
7.  fastclick
    
    好用的解决方案，不介意多加载几KB的话，不建议使用，因为有人遇到了bug，更多信息请查看：[Fastclick 导致click事件触发两次的问题][Fastclick _click]
    
    首先引入fastclick库，再把页面内所有touch事件都换成click，其实稍微有点麻烦，建议引入这几KB就为了解决点透问题不值得，不如用第一种方法呢

## 四.DEMO ##

写了不少测试页面，请查看：[Git@OSC ayqy / my.js][Git_OSC ayqy _ my.js]

源引：

http://www.ayqy.net/blog/%E7%A7%BB%E5%8A%A8%E9%A1%B5%E9%9D%A2%E7%82%B9%E5%87%BB%E7%A9%BF%E9%80%8F%E9%97%AE%E9%A2%98%E8%A7%A3%E5%86%B3%E6%96%B9%E6%A1%88/

[HTML5]: http://www.ayqy.net/blog/html5%E8%A7%A6%E6%91%B8%E4%BA%8B%E4%BB%B6/
[javascript]: http://www.cnblogs.com/yexiaochai/p/3462657.html
[Fastclick _click]: http://blog.csdn.net/forevercjl/article/details/46730157
[Git_OSC ayqy _ my.js]: https://git.oschina.net/ayqy/my.js/tree/master/touch?dir=1&filepath=touch&oid=d5af27ee2e941856541530daa0ab0fa631b36c18&sha=79159dd6b94c4a6bf0d88966e37b12eba5dd57ff