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

Question

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

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

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

Answer 1

使用document.elementsFromPoint()（注意s），这将return一个包含所有可以指向的元素的数组这些坐标，按 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 实现 return 一个 NodeList，因此您可能需要将其缩减为一个数组优先。

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

Find if element A is behind element B in HTML DOM tree

html

javascript

css

dom

z-index