浏览器如何知道哪个元素应该获得点击或悬停事件？

Posted 2023-02-21

【中文标题】浏览器如何知道哪个元素应该获得点击或悬停事件？

【英文标题】：How does the browser know which element should get a click or hover event?

【发布时间】：2012-01-24 02:32:21

【问题描述】：

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;

该功能是如何工作的？

【问题讨论】：

浏览器知道其中显示的网页的一切。因此，如果您单击网页中的任何位置，浏览器就会知道您单击了什么。所以要小心你点击什么...浏览器知道...

您可以在 quirksmode 中从 introduction to events 开始（尽管持保留态度），然后尝试使用 W3C Events spec。浏览器有一个文档对象模型 (DOM)，因此它们可以准确地知道每个元素和节点在页面中的位置以及它们的各种属性。

RobG：浏览器如何知道哪个元素在顶部？

@Kevin - 浏览器如何不“知道”？浏览器创建了布局。它负责页面上的所有对象。它知道关于他们的一切。怎么可能不行？这是一个更好的问题。

OK... 存储最顶层（即可点击）元素的数据结构是什么？将鼠标的 x,y 坐标转换为 DOM 元素以触发事件的函数实际上是做什么的？

【参考方案1】：

通常（意思是 WebKit :)）浏览器会创建一个 渲染树，它大致对应于文档 DOM 树，但反映的是文档的视觉结构而不是逻辑结构。对于不可见元素（display: none），没有相应的渲染对象参与鼠标事件处理。每次 DOM 或其某些视觉方面（元素显示、可见性、尺寸等）发生变化时，都会修改渲染树。

【参考方案2】：

应用了display: none 的元素（或其父元素）将从布局中移除，因此它们在页面上不再有任何位置。

如果您对 HTML 布局的一般工作原理更加好奇，一个很好的起点可能是 CSS 规范的 visual formatting model 章节。一旦你理解了这一点，理解事件是如何被触发的就相对简单了——事件首先被发送到具有最高 z-index 并包含你点击的点的元素。 （如果您在这里询问：#mydiv 没有位置，因此它不能包含您单击的点。）