移动端点击穿透问题
2019-06-21 本文已影响0人
给我翻译翻译
0x1 问题来源
移动端的click事件大约有300ms的延迟，绑定的touch事件触发后可能会继续触发click事件，例如touch事件触发了页面的跳转，该跳转在300ms内完成，完成跳转后的页面在点击区域内的元素绑定了click事件，则该事件会被触发。
针对该问题，一些主流框架使用了非默认的tap事件来代替touchstart、touchmove、touchend事件以消除300ms延迟。对于简单的页面，可以把touchstart或者touchend当做tap来用，但是存在一些问题，比如手直接触目标元素，按住不放，慢慢移除响应区域，会触发touchstart事件执行对应的事件处理器（本不应该触发），touchend事件也存在类似的问题。
0x2 解决方案
- 取消默认行为
if(e.type=="touchend") e.preventDefault();
当A元素的touch事件被触发后touch事件可能会进而触发相同区域的B元素的click事件时，可以在处理完A元素的touchend事件后进而取消进一步的默认行为。
-
只用touch事件而或只用click事件
移动端较少考虑SEO问题，因此可以不使用a标签，那么a标签的click事件可以被其他标签（如span）的touch事件所替代，当然这可能会增加代码量，但是也同时挺高了对页面点击行为的相应速度。另外，只有click事件也不会有出现点击穿透的问题，不过会降低页面的反应速度。 -
fastclick代替click
fastclick库可以解决click问题，但是fastclick库存在一些bug。 -
....
还有很多解决方法，可以参考第一个参考博客文章
参考资料
