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

前言

技术普及性文章,这个问题在开发中非常常见。作者从简要的点击事件延迟引申出问题的现象再到最后的解决方案的优选性给出建议,各位可以看看。


正文从这开始~


.click300ms延迟

移动浏览器提供一个特殊的功能:双击(doubletap)放大


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


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


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


.点击穿透问题

点击穿透现象有3种:


点击穿透问题:点击蒙层(mask)上的关闭按钮,蒙层消失后发现触发了按钮下面元素的click事件


蒙层的关闭按钮绑定的是touch事件,而按钮下面元素绑定的是click事件,touch事件触发之后,蒙层消失了,300ms后这个点的click事件fireeventtarget自然就是按钮下面的元素,因为按钮跟蒙层一起消失了


跨页面点击穿透问题:如果按钮下面恰好是一个有href属性的a标签,那么页面就会发生跳转


因为a标签跳转默认是click事件触发,所以原理和上面的完全相同


另一种跨页面点击穿透问题:这次没有mask了,直接点击页内按钮跳转至新页,然后发现新页面中对应位置元素的click事件被触发了


和蒙层的道理一样,js控制页面跳转的逻辑如果是绑定在touch事件上的,而且新页面中对应位置的元素绑定的是click事件,而且页面在300ms内完成了跳转,三个条件同时满足,就出现这种情况了


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


.解决方案

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


  • 不要混用touchclick

既然touch之后300ms会触发click,只用touch或者只用click就自然不会存在问题了


  • 吃掉(或者说是消费掉)touch之后的click

依旧用tap,只是在可能发生点击穿透的情形做额外的处理,拿个东西来挡住、或者tap后延迟350毫秒再隐藏maskpointer-events、在下面元素的事件处理器里做检测(配合全局flag)等等,能吃掉就行


详细解决方案:

  • 只用touch

最简单的解决方案,完美解决点击穿透问题


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


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


  • 只用click

下下策,因为会带来300ms延迟,页面内任何一个自定义交互都将增加300毫秒延迟,想想都慢


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


  • 拿个东西来挡住

比较笨的方法,千万不要用


  • tap后延迟350ms再隐藏mask

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

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


  • pointer-events

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


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


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


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

比较麻烦,不建议使用


全局flag记录按钮点击的位置(坐标点),在下面元素的事件处理器里判断event的坐标点,如果相同则是那个可恶的click,拒绝响应


上面说的只是想法,没测试过,实在不行就用记录时间戳判断,等待350ms,这样就和pointer-events差不多


  • fastclick

好用的解决方案,不介意多加载几KB的话,不建议使用,因为有人遇到了bug,更多信息请查看:Fastclick 导致click事件触发两次的问题


首先引入fastclick库,再把页面内所有touch事件都换成click,其实稍微有点麻烦,建议引入这几KB就为了解决点透问题不值得,不如用第一种方法呢

作者:黯羽轻扬

原文链接: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梦工场 编辑从其他媒体精选HTML5相关文章转载,仅供网友学习和交流,如果我们的工作有侵犯到您的权益,请及时联系小编QQ:123464386,我们会在第一时间进行处理!投稿与合作,请发至邮箱:tommy@html5dw.com