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