Question

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;
}

该功能如何运作？

Answer 1

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

Answer 2

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

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

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

2 个答案: