iOS下的点击事件失效解决方法

iOS下的点击事件失效解决方法

---

问题描述

---

当委托给一个元素添加click事件时，如果事件是委托到 document 或 body 上，并且委托的元素是默认不可点击的(如 div, span 等)，此时 click 事件会失效。

demo:

  
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
  
  
    

      
点击我!
    

解决办法

---

解决办法有6种：

• 将 click 事件直接绑定到目标元素(即 .target ) 上

• 将目标元素换成 或者 等可点击的元素

• 给目标元素添加一个空的 onclick=""(

  点击我!
  )

• 把 click 改成 touchend 或 touchstart（注意加上preventDefault）

• 将 click 元素委托到非 document 或 body 的父级元素上

• 给目标元素加一条样式规则 cursor: pointer; (cursor: pointer; -webkit-tap-highlight-color: transparent;)

推荐后两种。推测在 Safari 中，不可点击元素的点击事件是不会冒泡到父级元素的。通过添加 cursor: pointer; 使得元素变成了可点击的了。

补充

---

问题

---

iOS系统 input 及 input内元素 cursor: pointer; 失效，使得在 iOS系统 上需要借助 cursor 属性才能生效的 click 事件无法触发

解决办法

• 设置 font-size: 0;

• 把 click 改成 touchend （注意加上preventDefault）

参考文档

• https://github.com/facebook/react/issues/134

• http://stackoverflow.com/questions/5421659/html-label-command-doesnt-work-in-iphone-browser/6472181#6472181