browser - 浏览器如何从鼠标位置找到父元素之外的元素

Question

我的问题与这个有关 浏览器如何知道哪个元素应该获得点击或悬停事件？. 问题是没有解释浏览器如何找到父元素之外的元素，如溢出元素或具有绝对位置的元素。更准确地说，渲染树如何处理它们？

到目前为止，我知道渲染元素存储在渲染树中。如果当用户将光标移动到视口上时我正确理解了这个想法，它必须检查是否存在具有悬停伪类的元素来应用样式，因此浏览器会搜索树以找到正确的元素并激活样式。当每个父节点完全包含其所有子节点时，应该很容易找到该元素，然后我们可以检查一个节点是否包含指定的位置，如果是，则对其子节点执行相同操作，直到到达包含该位置的最后一个节点. 但是，如果子项（或整个子项）的一部分在父项之外并且用户将鼠标悬停在父项之外的区域上，则此解决方案将不起作用。

下面有一个示例代码。当您将鼠标悬停在蓝色 div 上方的绿色 div（绝对定位）上时，渲染树将（使用上面的想法）检查灰色 div 节点是否包含光标位置，这是错误的，即使绿色 div 是那个的子节点节点，所以它找不到它，但是浏览器以某种方式正确处理这些情况，但是如何？

div {
  padding: 50px;
}

.abs {
  background-color: rgb(0, 100, 0);
  position: absolute;
  top: 150px;
  left: 30px;
}

.abs:hover {
  background-color: rgb(0, 150, 0);
}

.nonabs {
  background-color: rgb(100, 0, 0);
}

.nonabs:hover {
  background-color: rgb(150, 0, 0);
}

.parent1 {
  background-color: lightgrey;
}

.parent2 {
  background-color: lightblue;
}

<div class="parent1">
  <div class="abs">
    Absolute
  </div>
  <div class="nonabs">
    Non-absolute
  </div>
</div>
<div class="parent2">
  Second parent
</div>

标签： browsertreerendering