javascript - iPhone safari 上的奇怪点击事件气泡,它在冒泡到 document.body 之前停止

标签 javascript html mobile-safari mobile-website

我已将点击事件绑定(bind)为 document.body.onclick = function(){alert("aaa")};

无论我点击什么元素,它在 Android 或 IOS 上的 chrome 上都很好。 但它不会在 iPhone safari 上单击除 a 和 img 元素之外的元素时触发。

但它可以在绑定(bind) touchstart 事件时冒泡到 body。

最后,我必须添加到 div(#main) 以包含我的所有元素,然后将委托(delegate)对象绑定(bind)到此 div。

document.querySelector("#main").onclick = function(){alert("aaa")}

所以我想知道为什么 onclick 事件在它冒泡到 body 之前就停止了。

最佳答案

我知道这已经很老了,但当我遇到同样的问题时,我仍然设法将其挖掘出来。

简而言之,iOS Safari 中的鼠标事件不会冒泡到 document.body。除非 iOS Safari 认为事件目标是可点击的元素。

可点击元素是以下之一:

  1. The target element of the event is a link or a form field.

  2. The target element, or any of its ancestors up to but not including the <body>, has an explicit event handler set for any of the mouse events. This event handler may be an empty function.

  3. The target element, or any of its ancestors up to and including the document has a cursor: pointer CSS declarations.

(引自 here ,强调我的。)

可能的修复包括:

  • 添加cursor: pointer任何不符合描述的元素。
  • 向目标添加一个空操作事件处理程序。
  • 处理下一级的点击 document.body .

关于javascript - iPhone safari 上的奇怪点击事件气泡,它在冒泡到 document.body 之前停止,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/18524177/

相关文章:

javascript - 从 AJAX 每秒调用创建的帖子,无需用户输入,html View ?

javascript - 在 JSP 中使用 Jquery 自动完成时如何设置自动完成输入框的值

c# - 自定义脚本包排序错误

html - 如何覆盖一个div内部元素?

javascript - 更改背景颜色和文本,逻辑是否存在但脚本不起作用?

主屏幕上的 iPhone 网络应用程序总是会重新加载在应用程序之间切换

css - 为什么悬停 div 元素在 iOS Safari (iPhone/iPad) 上不起作用?

javascript - 如何在PHP中获取另一个页面或div上的点击事件的值?

jQuery scrollTo 在 IE8 中导致问题 - 代码块后没有脚本执行

javascript - 如何使动态 ReactJS 组件在高度上匹配,并在内容上对齐?