移动设备上的点击处理

在 iOS 上(Andriod没亲自试过,估计同样),在使用事件委托的方式绑定 click 事件会无法生效。

比如我写了一个"假按钮",一个带有文字的 div 并绑定了 click 事件

//  html
点击我
// CSS div{ width:200px; height:50px; line-height:50px; text-align:center; background-color: orange} // JQuery $('div').click(function(){ alert('已点击'); });

在 iOS 上去测试,会发现点击到“点击我”这段文字,无法触发 click 事件,当你点击 div 的边缘区域(没有被文字覆盖的区域)事件才可以触发。

其实就是因为浏览器“发现”此处有个一文本节点,采用了事件委托的方式来执行 click 而无果。

怎么解决呢?

  • ❌ 用 ,问题还是存在。
  • ✅ 用 button 类型的 input 标签是可以的:

    因为按钮名字并不是写在一个闭合标签内的(也就是浏览器不会“发现”这里有一个文本节点)。
  • ✅ 个人认为,最佳解决方案是:在移动端,使用 touch 事件替代 click 事件,(或是使用 fastclick 替代 click 事件)。

[完]

你可能感兴趣的:(移动设备上的点击处理)