如何判断HTML元素是否堆叠在其他元素上方并计算重叠覆盖面积

适用场景说明 #

针对网站搭建器的交互特性，组件的位置、尺寸变更仅发生在新增、拖拽、缩放等可感知的操作节点，你完全不需要全局定时遍历所有组件校验，仅在操作触发时针对单个变更组件做检测即可，性能损耗可忽略。

两种简洁实现方案 #

方案1：基于elementsFromPoint的点采样检测（最简洁，无遍历） #

仅需要对当前变更的组件的几个特征点做检测，就能快速定位到重叠的其他组件，同时计算重叠面积：

// 传入当前发生位置/尺寸变更的组件元素，返回重叠的组件列表和对应重叠面积
function checkComponentOverlap(currentComponent) {
  const rect = currentComponent.getBoundingClientRect()
  // 采样特征点：四个角+中心点，覆盖绝大多数重叠场景，可根据需要增加采样点
  const checkPoints = [
    {x: rect.left, y: rect.top},
    {x: rect.right, y: rect.top},
    {x: rect.left, y: rect.bottom},
    {x: rect.right, y: rect.bottom},
    {x: rect.left + rect.width/2, y: rect.top + rect.height/2}
  ]
  const overlapComponents = new Set()
  
  checkPoints.forEach(point => {
    // 直接调用浏览器原生API获取该坐标点下的所有元素
    const elementsAtPoint = document.elementsFromPoint(point.x, point.y)
    elementsAtPoint.forEach(el => {
      // 过滤出主面板内的其他组件元素
      if (el !== currentComponent && el.classList.contains('panel-component')) {
        overlapComponents.add(el)
      }
    })
  })

  // 计算每个重叠组件的重叠面积
  const result = []
  const currentRect = currentComponent.getBoundingClientRect()
  overlapComponents.forEach(el => {
    const targetRect = el.getBoundingClientRect()
    // 计算重叠区域边界
    const overlapLeft = Math.max(currentRect.left, targetRect.left)
    const overlapRight = Math.min(currentRect.right, targetRect.right)
    const overlapTop = Math.max(currentRect.top, targetRect.top)
    const overlapBottom = Math.min(currentRect.bottom, targetRect.bottom)
    const overlapArea = (overlapRight - overlapLeft) * (overlapBottom - overlapTop)
    if (overlapArea > 0) {
      result.push({
        componentA: currentComponent,
        componentB: el,
        overlapArea: overlapArea
      })
    }
  })
  return result
}

你只需要在组件新增、拖拽结束、缩放结束的回调里调用这个方法即可，全程没有遍历主面板下的所有组件，完全依赖浏览器原生API实现。

方案2：基于IntersectionObserver的自动观测（无手动遍历） #

如果需要实时监测所有组件的重叠状态（不需要操作触发），可以用浏览器原生的交叉观测API，底层由浏览器做性能优化，不需要你手动遍历计算：

const mainPanel = document.querySelector('#main-panel')
const overlapMap = new Map()

// 给每个新增的组件绑定观测
function observeComponent(component) {
  const observer = new IntersectionObserver((entries) => {
    entries.forEach(entry => {
      if (entry.intersectionRatio > 0) {
        const overlapArea = entry.intersectionRect.width * entry.intersectionRect.height
        overlapMap.set(component, {
          overlapWith: entry.target,
          area: overlapArea
        })
      }
    })
  }, {
    root: mainPanel,
    threshold: 0.01 // 只要出现1%的重叠就触发回调
  })
  observer.observe(component)
}

当组件从面板中移除时，调用observer.unobserve(component)销毁观测即可。

注意事项 #

• 如果你的组件存在半透明、pointer-events为none的情况，需要在调用elementsFromPoint前临时修改pointer-events属性，检测完成后再恢复，避免元素被漏检。
• 采样点的数量可以根据你的组件最小尺寸调整，最小组件的尺寸小于采样点间距时，适当增加采样点即可覆盖所有场景。

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