Fork me on GitHub

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


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

添加点击事件

1
2
3
4
5
6
7
8
$(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/

请我喝一个苹果味的美年达吧,谢谢!