浏览器如何知道哪个元素应该获得单击或悬停事件？
当用户将鼠标悬停在某个元素上或单击某个元素时，Javascript 允许您触发自定义事件。但是Javascript如何知道哪些元素应该接收点击事件呢？
例如，像这样的 HTML 元素：
<div style="width: 300; height: 300;">
<a href="hello">Hello World</a>
</div>
如果我单击链接，浏览器就会知道执行附加到该链接的所有单击事件。但是浏览器如何知道链接在页面上的哪个位置（或者甚至知道它是可见的？）
考虑一下：
<div id="mydiv" style="width: 300; height: 300;">
<a href="hello">Hello World</a>
</div>
<style>
#mydiv a {
display: none;
}
</style>
现在，当我单击链接曾经可见的空间时，不会发生任何事情。在这种情况下，浏览器如何知道不触发单击/悬停事件？如果我想重新创建所使用的算法，我需要哪些元素？
我假设浏览器代码中有一些函数如下所示：
/* Take user's mouse coordinates and return a DOM element. */
function returnElementBasedOnMouseCoordinate(x, y) {
/* Does a lookup function on some data structure */
return someElementInTheDom;
}
该函数如何工作？
Javascript lets you fire custom events when the user hovers over an element or when a user clicks on an element. But how does Javascript know which elements should receive the click event?
For example an HTML element like this:
<div style="width: 300; height: 300;">
<a href="hello">Hello World</a>
</div>
If I click on the link, the browser knows to execute all click events attached to that link. But how does the browser know where on the page the link is (or even that it's visible?)
Consider:
<div id="mydiv" style="width: 300; height: 300;">
<a href="hello">Hello World</a>
</div>
<style>
#mydiv a {
display: none;
}
</style>
Now nothing will happen when I click on the space where the link used to be visible. How does the browser know not to fire click/hover events in this case? If I wanted to recreate the algorithm used, what elements would I need?
I assume there is some function in browser code that looks like this:
/* Take user's mouse coordinates and return a DOM element. */
function returnElementBasedOnMouseCoordinate(x, y) {
/* Does a lookup function on some data structure */
return someElementInTheDom;
}
How does that function work?
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（2）
通常（指的是 WebKit :)）浏览器创建一个渲染树，它大致对应于文档 DOM 树，但反映了文档的视觉结构而不是逻辑结构。对于不可见元素（display: none），没有相应的渲染对象参与鼠标事件处理。每次 DOM 或其某些视觉方面（元素显示、可见性、尺寸等）发生变化时，渲染树都会被修改。
Typically (meaning WebKit :)) browsers create a render tree which roughly corresponds to the document DOM tree but reflects the visual rather than logical structure of the document. For invisible elements (display: none), there are no corresponding render objects which participate in mouse event handling. The render tree is modified every time the DOM or some of its visual aspects (element display, visibility, dimensions, etc.) change.
对其（或其父级）应用了
display: none的元素将从布局中删除，因此它们不再在页面上具有任何位置。如果您对 HTML 布局的一般工作原理更好奇，一个好的起点可能是 CSS 规范关于 视觉格式化模型。一旦理解了这一点，理解事件是如何触发的就相对简单了——事件首先发送到具有最高 z-index 并包含您单击的点的元素。 （如果您在这里询问，请再次强调：
#mydiv没有位置，因此它不能包含您单击的点。）Elements which have
display: noneapplied to them (or to their parents) are removed from the layout, so they no longer have any location on the page.If you're more curious about how HTML layout works in general, a good starting point may be the CSS specification's chapter on the visual formatting model. Once you understand that, understanding how events are fired is relatively straightforward -- events are sent first to the element which has the highest z-index and contains the point you clicked on. (In the case you're asking about here, again:
#mydivhas no location, so it can't contain the point you clicked on.)