iPhone safari 上奇怪的单击事件气泡，它在冒泡到 document.body 之前停止答案

【问题标题】：Strange Click Event Bubble on iPhone safari that it stop before bubbling to document.bodyiPhone safari 上奇怪的单击事件气泡，它在冒泡到 document.body 之前停止
【发布时间】：2013-09-02 16:01:51
【问题描述】：

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

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

但是在绑定 touchstart 事件时它可以冒泡到正文。

最后，我必须添加到 div(#main) 以包含我所有的元素，然后在这个 div 上绑定委托对象。

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

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

【问题讨论】：

标签： javascript html mobile-safari mobile-website

【解决方案1】：

我知道这已经很老了，但当我遇到同样的问题时，我仍然设法挖掘它。

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

可点击元素是以下之一：

事件的目标元素是链接或表单域。

目标元素，或其任何祖先元素，直到但不包括<body>，为任何鼠标事件设置了显式事件处理程序。此事件处理程序可能是一个空函数。

目标元素，或者它的任何祖先元素，包括文档，都有一个光标：指针 CSS 声明。

（引自here，强调我的。）

可能的修复包括：

将cursor: pointer 添加到任何不符合描述的元素。
向目标添加无操作事件处理程序。
处理低于document.body 一级的点击。

【讨论】：

这行得通。我想添加一个我注意到的奇怪行为：如果我远程调试 Safari (IOS) 并在触摸事件上设置断点，它工作正常（事件冒泡），但如果我禁用断点，它不会。
老实说，这听起来确实像 Safari iOS 会做的事情。 :D