如何检测HTML元素是否相交？基于getBoundingClientRect的技术问询

嘿，刚好我之前也遇到过类似的需求，这就给你讲清楚怎么判断两个元素的边界矩形是否相交！

首先你已经用getBoundingClientRect()拿到了每个元素的DOMRect对象，它包含了top（元素顶部距离视口顶部的距离）、right（元素右侧距离视口左侧的距离）、bottom（元素底部距离视口顶部的距离）、left（元素左侧距离视口左侧的距离）这些关键属性，接下来就可以用两种方式判断相交：

方法一：手动判断相交逻辑（兼容所有浏览器） #

两个矩形不相交的情况只有四种：

• A元素的右边界 ≤ B元素的左边界（A在B的左边）
• A元素的左边界 ≥ B元素的右边界（A在B的右边）
• A元素的下边界 ≤ B元素的上边界（A在B的上方）
• A元素的上边界 ≥ B元素的下边界（A在B的下方）

只要这四个条件都不成立，就说明两个元素相交。我们可以把这个逻辑封装成一个函数：

function isRectIntersecting(rectA, rectB) {
  // 检查是否不相交，取反就是相交
  return !(
    rectA.right <= rectB.left ||
    rectA.left >= rectB.right ||
    rectA.bottom <= rectB.top ||
    rectA.top >= rectB.bottom
  );
}

然后结合你的代码调用：

const container1Rect = document.getElementById("container1").getBoundingClientRect();
const container2Rect = document.getElementById("container2").getBoundingClientRect();
const container3Rect = document.getElementById("container3").getBoundingClientRect();

// 检测粉色和蓝色是否相交
console.log(isRectIntersecting(container1Rect, container2Rect)); // 应该返回true
// 检测粉色和红色是否相交
console.log(isRectIntersecting(container1Rect, container3Rect)); // 应该返回false
// 检测蓝色和红色是否相交
console.log(isRectIntersecting(container2Rect, container3Rect)); // 应该返回false

方法二：用DOMRect原生的intersection()方法（现代浏览器推荐） #

现代浏览器的DOMRect对象自带了intersection()方法，它会返回两个矩形的交集区域。如果交集区域的width和height都大于0，就说明两个元素相交：

function isRectIntersectingModern(rectA, rectB) {
  const intersectionRect = rectA.intersection(rectB);
  // 交集存在（宽高都大于0）则相交
  return intersectionRect.width > 0 && intersectionRect.height > 0;
}

调用方式和上面一样，这个方法代码更简洁，逻辑也更直观，适合不需要兼容旧浏览器的场景。

你可以根据自己的浏览器兼容需求选择其中一种方法，两种都能准确判断出你说的粉色&蓝色相交、红色不与任何元素相交的情况~

内容的提问来源于stack exchange，提问作者yavg