当前位置:首页 > 博客 >Javascript > 正文

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

时间:2018-09-21 09:24   作者:admin   点击:

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

解决办法有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; 使得元素变成了可点击的了。