使用jQuery/JS检测多个绝对定位子元素的重叠/碰撞问题

我来帮你搞定这个多元素重叠检测的需求！既然所有<p>元素都是动态加载的，数量、位置和宽度都不确定，我们可以用一个通用的方法来遍历所有元素，两两检查它们是否重叠。

第一步：写一个判断两个元素是否重叠的基础函数 #

首先我们需要一个核心函数，用来判断任意两个DOM元素是否存在重叠。这个函数会利用getBoundingClientRect()获取元素的位置和尺寸信息，然后通过矩形碰撞检测的逻辑来判断：

function isOverlapping(el1, el2) {
  // 获取两个元素的视口位置信息
  const rect1 = el1.getBoundingClientRect();
  const rect2 = el2.getBoundingClientRect();

  // 判断两个元素是否完全不重叠：
  // el1在el2的右侧 / el1在el2的左侧 / el1在el2的下方 / el1在el2的上方
  const noOverlap = rect1.right <= rect2.left || 
                    rect1.left >= rect2.right || 
                    rect1.bottom <= rect2.top || 
                    rect1.top >= rect2.bottom;

  // 取反就是存在重叠的情况
  return !noOverlap;
}

第二步：遍历所有元素，两两检测重叠 #

接下来我们需要遍历所有动态加载的<p>元素，对每一对元素进行重叠检测。这里要注意避免重复检测（比如已经检查过元素A和B，就不要再检查B和A了），所以用嵌套循环来实现：

function detectAllOverlaps(parentSelector = '.parent-div') {
  // 获取父元素下所有的<p>子元素
  const paragraphs = document.querySelectorAll(`${parentSelector} p`);
  // 存储所有重叠的元素对
  const overlappingPairs = [];

  // 外层循环遍历每个元素
  for (let i = 0; i < paragraphs.length; i++) {
    // 内层循环只遍历当前元素之后的元素，避免重复检测
    for (let j = i + 1; j < paragraphs.length; j++) {
      const elA = paragraphs[i];
      const elB = paragraphs[j];

      if (isOverlapping(elA, elB)) {
        // 记录重叠对
        overlappingPairs.push([elA, elB]);
        // 这里可以添加你需要的操作，比如给重叠元素加样式标记
        elA.classList.add('overlapped');
        elB.classList.add('overlapped');
        console.log(`元素${i+1}和元素${j+1}发生重叠`);
      }
    }
  }

  return overlappingPairs;
}

第三步：确保在元素加载完成后执行检测 #

因为元素是从数据库动态加载的，所以一定要等所有<p>元素都渲染到DOM之后再调用检测函数。比如：

• 如果是用原生AJAX加载数据，可以在请求成功、DOM更新完成后调用detectAllOverlaps()；
• 如果是Vue框架，可以在mounted钩子或者watch监听数据变化后调用；
• 如果是React，可以在useEffect钩子中，依赖动态数据完成渲染后执行。

扩展优化（可选） #

如果你的页面中动态加载的元素数量特别多（比如上百个），嵌套循环的效率可能会有点低。这时可以考虑用空间分区的思路优化：先把元素按X轴或Y轴的位置分组，只检测同一组内的元素，减少不必要的对比。不过对于大多数场景来说，上面的基础方法已经足够好用了。

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