在iPhone野生动物园中出现奇怪的Click事件气泡，气泡冒泡到document.body之前就停止了 [英] Strange Click Event Bubble on iPhone safari that it stop before bubbling to document.body
问题描述
我将click事件绑定为document.body.onclick = function(){alert("aaa")};
I have bind a click event as document.body.onclick = function(){alert("aaa")};
无论我单击什么元素，它在android或ios上的chrome上都表现出色. 但是，当单击a和img元素之外的元素时，它不会在iPhone Safari中触发.
It do good both on android or chrome on IOS whatever element I click. But it does not trigger on iPhone safari while click the elements except a and img element.
但是在绑定touchstart事件时，它可能会冒泡到身体.
But it can bubble to body while binding the touchstart event.
最后，我必须添加到div(#main)中以包含我的所有元素，然后在该div上绑定委托对象.
At last, I have to add to div(#main) to contain all my elements, and then bind the delegate object on this div.
document.querySelector(#main").onclick = function(){alert("aaa")}
document.querySelector("#main").onclick = function(){alert("aaa")}
所以我在徘徊为什么onclick事件在冒泡到正文之前就停止了.
So I am wandering why the onclick event stops before it bubble to body.
推荐答案
我知道这已经很老了，但是当我遇到同样的问题时，我仍然设法对其进行了挖掘.
I know this is quite old, but I still managed to dig it up when I ran into the very same issue.
简而言之，除非iOS Safari认为事件目标是可点击的元素，否则iOS Safari中的鼠标事件不会冒出document.body.
In short, mouse events in iOS Safari do not bubble up to the document.body unless iOS Safari thinks the event target is a clickable element.
可点击元素是以下之一:
Clickable element is one of the following:
-
事件的目标元素是链接或表单字段.
The target element of the event is a link or a form field.
目标元素或其任何祖先，直到但不包括 <body>，都为任何鼠标事件设置了显式事件处理程序.此事件处理程序可能是空函数.
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.
目标元素或其任何始于文档(包括文档)的元素都有一个光标:指针CSS声明.
The target element, or any of its ancestors up to and including the document has a cursor: pointer CSS declarations.
(引自此处，重点是我的.)
(Quoted from here, emphasis mine.)
可能的解决方法包括:
- 将
cursor: pointer添加到任何不符合描述的元素. - 向目标添加无操作事件处理程序.
- 将点击次数控制在
document.body以下一级.
- Add
cursor: pointerto any element that does not fit the description. - Add a no-op event handler to the target.
- Handle the clicks one level below
document.body.
这篇关于在iPhone野生动物园中出现奇怪的Click事件气泡，气泡冒泡到document.body之前就停止了的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
