移动设备上的点击处理

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

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

//  html
<div>点击我</div>
// 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> 标签不太奏效，因为同样要把按钮的文字写在标签内：<button>点击我</button>，问题还是存在。
• ✅ 用 button 类型的 input 标签是可以的：
  <input type="button" value="点击我">
  因为按钮名字并不是写在一个闭合标签内的（也就是浏览器不会“发现”这里有一个文本节点）。
• ✅ 个人认为，最佳解决方案是：在移动端，使用 touch 事件替代 click 事件，（或是使用 fastclick 替代 click 事件）。

[完]