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）