检测HTML元素间的重叠关系

在前端开发内容学习中，检测 HTML 元素间的重叠关系：获取与指定元素相接触的所有同级 div是常见主题。很多人在阅读时会遇到概念分散、步骤不清和注意点难以归纳的问题。本文按照基础概念、操作流程和关键细节，对相关内容进行整理。

本文介绍如何通过 getBoundingClientRect() 精确判断一个可拖拽 div 与其同级兄弟元素是否发生视觉重叠（边界相触即视为重叠），并返回所有重叠元素组成的数组，适用于拖拽布局、碰撞检测等交互场景。

本文介绍如何通过 `getBoundingClientRect()` 精确判断一个可拖拽 div 与其同级兄弟元素是否发生视觉重叠（边界相触即视为重叠），并返回所有重叠元素组成的数组，适用于拖拽布局、碰撞检测等交互场景。

在构建拖拽式 UI（如看板、仪表盘或画布编辑器）时，常需实时识别某个元素是否与其他元素发生视觉重叠——例如当用户拖动卡片时，高亮显示其“接触”的目标区域。关键在于：重叠 ≠ 完全覆盖，只要两个元素的边界矩形存在交集（含边线相接），即判定为“触碰”。

以下是一个健壮、零依赖的工具函数 getTouchingDivs，它接收一个 DOM 元素，返回其所有同级 <div> 中与其矩形区域重叠的元素数组：

function getTouchingDivs(item) {
if (!item || !item.parentNode) return [];

const itemRect = item.getBoundingClientRect();
const touchingDivs = [];
// 遍历所有同级子元素（不限于 div，但可根据需要过滤）
for (const sibling of item.parentNode.children) {
// 跳过自身，且建议显式过滤非 div 元素（如需严格限定）
if (sibling === item || sibling.nodeType !== Node.ELEMENT_NODE || sibling.tagName !== 'DIV') {
continue;
}

const siblingRect = sibling.getBoundingClientRect();
// 使用标准 AABB（轴对齐包围盒）重叠检测：
// 两矩形不重叠 ⇔ 其中一个完全在另一个的左/右/上/下
const isOverlapping = !(
itemRect.right < siblingRect.left ||
itemRect.left > siblingRect.right ||
itemRect.bottom < siblingRect.top ||
itemRect.top > siblingRect.bottom
);

if (isOverlapping) {
touchingDivs.push(sibling);
}
}
return touchingDivs;
}

✅ 使用示例：

const item1 = document.querySelector('#task-1');
const overlappingItems = getTouchingDivs(item1);
console.log(`与 #task-1 重叠的元素：`, overlappingItems);

⚠️ 注意事项：

• 函数基于 getBoundingClientRect()，返回的是视口坐标系下的绝对位置，自动适配缩放、滚动和 CSS 变换（如 transform: translate），但不支持 transform: rotate 等非轴对齐变换（此时需用 DOMMatrix 或第三方库处理）；
• 若父容器设置了 overflow: hidden 或 clip-path，视觉裁剪不影响矩形计算结果，逻辑仍按原始尺寸判定；
• 如需排除 display: none 或 visibility: hidden 元素，可在循环内添加 getComputedStyle(sibling).display !== 'none' && getComputedStyle(sibling).visibility === 'visible' 判断；
• 性能提示：频繁调用（如拖拽中每帧执行）时，建议对 itemRect 和 siblingRect 缓存，并考虑节流或仅在位置变更后触发检测。

该方法简洁、兼容性强（支持所有现代浏览器），是实现轻量级前端碰撞检测的理想起点。