使用 JavaScript 检查两个元素是否重叠

要检查两个元素是否重叠,请使用 getBoundingClientRect() 方法获取一个对象,该对象包含有关元素与视口的相对位置的信息。 然后,比较两个矩形的边界边缘(上、右、下、左)。

以下是本文示例的 HTML。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
  </head>

  <body>
    <div id="box1" style="width: 100px; height: 100px; background-color: salmon; position:absolute;">
      Box 1
    </span>

    <div id="box2" style="width: 100px; height: 100px; background-color: lime">
      Box 2
    </span>

    <div id="box3" style="width: 100px; height:100px; background-color: plum; margin-top: 150px;">
      Box 3
    </div>

    <script src="index.js"></script>
  </body>
</html>

这是相关的 JavaScript 代码。

function elementsOverlap(el1, el2) {
  const domRect1 = el1.getBoundingClientRect();
  const domRect2 = el2.getBoundingClientRect();

  return !(
    domRect1.top > domRect2.bottom ||
    domRect1.right < domRect2.left ||
    domRect1.bottom < domRect2.top ||
    domRect1.left > domRect2.right
  );
}

const el1 = document.getElementById('box1');
const el2 = document.getElementById('box2');
const el3 = document.getElementById('box3');

console.log(elementsOverlap(el1, el2)); // ?️ true

console.log(elementsOverlap(el1, el3)); // ?️ false

我们创建了一个可重用的函数来检查两个元素是否重叠并返回一个布尔结果:

  • 如果元素重叠,则为 true。
  • 如果他们不这样做,则为假。

我们使用 getBoundingClientRect() 方法来获取一个对象,该对象包含有关元素与视口的相对位置的信息。

另一方面,如果所有条件都返回 false,则元素重叠。

当我们使用 id 为 box1 和 box2 的元素调用 elementsOverlap 函数时,该函数返回 true,因为第一个元素的位置设置为绝对位置并与第二个元素重叠。

当我们使用第一个和第三个元素调用该函数时,它返回 false,因为第三个元素的 margin-top 为 150px 并且不与第一个重叠。