js 检测元素是否被覆盖

知识点：Document.elementFromPoint()

　　返回当前文档上处于指定坐标位置最顶层的元素, 坐标是相对于包含该文档的浏览器窗口的左上角为原点来计算的, 通常 x 和 y 坐标都应为正数.

 

js如下：

function hasOverLayer(element) {
  let document = element.ownerDocument,
      rect = element.getBoundingClientRect(), // 获取目标的矩形信息
      x = rect.x, 
      y = rect.y, 
      width = rect.width, 
      height = rect.height;

  x |= 0;
  y |= 0;
  width |= 0;
  height |= 0;
  // 四顶点取样
  let elements = [
    document.elementFromPoint(x+1, y+1),
    document.elementFromPoint(x + width-1, y+1),
    document.elementFromPoint(x+1, y + height-1),
    document.elementFromPoint(x + width-1, y + height-1)
  ];
  // 判断非本身及非子孙元素
  return elements.filter((el)=> el !== null).some((el)=> el !== element && !element.contains(el));
}

 

引申：检测是否在可视区域（即x、y的检测）

IntersectionObserver