safari手机浏览器点击事件失效

发表于
天之涯，地之角，知交半零落。 一瓢浊酒尽余欢，今宵别梦寒。

添加点击事件

1
2
3
4
5
6
7
8
9
$(document).on('click', '#MenuToggle', function(){
    $("#divBox").addClass("box-overflow");
    $(".divBoxOverlay").addClass("push-overlay");
    $(".divBoxOverlay").on('touchmove', function (e) {
        e.preventDefault();
    });
    $("#topMenu").addClass("animate-translate");
});

或者

1
2
3
4
5
document.addEventListener('click', function (e) {
  if (e.target && e.target.matches('#btn')) {
    window.alert('hello ios safari')
  }
})

iOS 的 Safari 下，委托点击事件在某些情况下会出现点击失效

解决办法

  • 最简单的，给 CSS 加上 cursor: pointer；
  • 停止委托，直接给 #btn 绑定事件处理器；
  • 给div元素加上 onclick=’void(0);’；
  • 将 div 换成其它不受该 bug 特性影响的元素，比如 a、button 等。

https://developer.mozilla.org/en-US/docs/Web/API/Element/click_event#Safari_Mobile
https://blog.zfanw.com/ios-safari-click-not-working/