iOS下的点击事件失效解决方法
ios端给一个元素添加click事件时，如果事件是委托到 document 或 body 上，并且委托的元素是默认不可点击的(如 div, span 等)，此时 click 事件会失效。
demo:
<!DOCTYPE html> <html lang="en"> <head> <title></title> <meta charset="UTF-8"> </head> <body> <div class="container"></div> <div class="target">点击我!</div> </div> <script src="https://cdn.bootcss.com/jquery/2.2.4/jquery.js"></script> <script> $(function () { // $(document).on('click', '.target', function () {}) $('body').on('click', '.target', function () { alert('我被点击了！！！'); }); }); </script> </body> </html>
解决办法
解决办法有6种：
-
将
click事件直接绑定到目标元素(即.target) 上 -
将目标元素换成
<a>或者<button>等可点击的元素 -
给目标元素添加一个空的
onclick=""(<div class="target" onclick="">点击我!</div>) -
把
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）
