javascript - 在 HTML DOM 树中查找元素 A 是否在元素 B 之后

Question

在 DOM 树中有一对任意的碰撞元素(通过 rects)，如何找到它们中的一个在前面，哪个在后面？

给定 DOM 树中的 el1 和 el2 并使用 el1.getBoundingClientRect() 和 el2.getBoundingClientRect() 知道重叠点 可以找到重叠矩形。但是，在重叠矩形 document.elementFromPoint(x,y) 内设置 (x,y) 点仅返回一个元素，该元素在给定点位于其他元素之前。此元素既不能是 el1 也不能是 el2。

因此，如果需要查找 el1 是否在 el2 前面，反之亦然，则此方法不起作用。

Answer 1

使用document.elementsFromPoint() (注意 s)，这将返回一个数组，其中包含可以指向这些坐标的所有元素，按 z-index 排序。

onclick = e => {
  console.log( document.elementsFromPoint( e.clientX, e.clientY ) );
}

.container div {
  width: 100px;
  height: 100px;
  border: 1px solid;
  position: absolute;
  opacity: 0.5;
}
.A {
  background: red;
  top: 0;
  left: 0;
}
.B {
  background: green;
  top: 50px;
  left: 50px;
}
.C {
  background: blue;
  top: 25px;
  left: 25px;
}

<div class="container">
  <div class="A"></div>
  <div class="B"></div>
  <div class="C"></div>
</div>

然后您可以根据需要过滤此数组，使其仅包含一些元素并比较它们在该数组中的位置，但要注意 MS 实现返回一个 NodeList，因此您可能需要先将其缩减为一个数组。