移动端的“点透”问题

阅读更多

移动端的“点透”问题，这篇博文有较好的说明：
http://www.cnblogs.com/zldream1106/p/3670988.html




移动端的事件触发顺序： touchstart -> touchend  -> click

通常的情况是：
1. A区域是一个浮层，绑定touchstart/touchend事件，事件函数将A区域隐藏。
2. 点击发生的位置在B区域上方，而B区域恰好能够捕捉click事件（例如原生的a标签），从而被触发。
3. 这种 在A区域点击，却“透过”A区域，导致B区域也触发 click 事件的情况，我们称之为“点透”。

所以，避免“点透”的处理方法是：
1. 在A区域的touchstart/touchend事件，调用 e.preventDefault()方法，阻止click事件的继续触发。

2.A区域使用 click事件，而不是 touchstart/touchend事件，从而click事件在这个时候已经被生成处理。

3. 使用fastclick（https://github.com/ftlabs/fastclick/blob/master/lib/fastclick.js）来统一处理。
其实 fastclick的原理同1。它主要是在 body上绑定监听事件，然后做出判断，是否需要调用 preventDefault()来处理。

=================================================

以下则是我的实验测试。

  
  



  
  
  
  


  

  

     www.baidu.com
  
  

  
  

fastclick的核心代码截图：

• 
• 大小: 83 KB

• 
• 大小: 48.6 KB

• 查看图片附件