移动端点击穿透问题

0x1 问题来源

移动端的click事件大约有300ms的延迟，绑定的touch事件触发后可能会继续触发click事件，例如touch事件触发了页面的跳转，该跳转在300ms内完成，完成跳转后的页面在点击区域内的元素绑定了click事件，则该事件会被触发。

针对该问题，一些主流框架使用了非默认的tap事件来代替touchstart、touchmove、touchend事件以消除300ms延迟。对于简单的页面，可以把touchstart或者touchend当做tap来用，但是存在一些问题，比如手直接触目标元素，按住不放，慢慢移除响应区域，会触发touchstart事件执行对应的事件处理器（本不应该触发），touchend事件也存在类似的问题。

0x2 解决方案

1. 取消默认行为

if(e.type=="touchend") e.preventDefault();

当A元素的touch事件被触发后touch事件可能会进而触发相同区域的B元素的click事件时，可以在处理完A元素的touchend事件后进而取消进一步的默认行为。

2. 只用touch事件而或只用click事件
   移动端较少考虑SEO问题，因此可以不使用a标签，那么a标签的click事件可以被其他标签（如span）的touch事件所替代，当然这可能会增加代码量，但是也同时挺高了对页面点击行为的相应速度。另外，只有click事件也不会有出现点击穿透的问题，不过会降低页面的反应速度。

3. fastclick代替click
   fastclick库可以解决click问题，但是fastclick库存在一些bug。

4. ....

还有很多解决方法，可以参考第一个参考博客文章

参考资料

1. 移动端页面点击穿透问题
2. 10-移动端开发教程-移动端事件