如何使用js检查顶部是否有任何元素部分？

Question

我需要检查给定的元素，如果存在任何点，elementFromPoint将此点作为参数给出将返回此元素。我不需要找到这一点 - 只要信息至少有一个。它等同于“如果元素的任何部分未被另一个元素覆盖”。

示例：JSFiddle - 因为有一部分num2和num3是“在顶部”所需的功能应返回true为这两个。然而，对于num1结果应该是false。

Answer 1

我不确定是否有比使用element.getClientRects()获取元素边界的强力选项更好的方法，然后使用elementFromPoint迭代该区域以查看它是否返回该元素：

var checkIfOnTop = function(el) {
  console.log("Checking",el);
  var rect = el.getClientRects()[0];
  for (var x = rect.left; x <= rect.right; x++) {
    for (var y = rect.top; y <= rect.bottom; y++) {
      if (document.elementFromPoint(x, y) === el) {
        console.log("This element is reachable by click at ",x,y);
        return true;
      }
    }
  }
  console.log("This element is not reachable by click");
  return false;
}

checkIfOnTop(document.getElementById('num1'));
checkIfOnTop(document.getElementById('num2'));
checkIfOnTop(document.getElementById('num3'));

#container { position: relative }
#num1 { position: absolute; left: 50px; height: 200px; width: 200px; background-color: blue}
#num2 { position: absolute; left: 50px; height: 200px; width: 200px; background-color: green}
#num3 { position: absolute; left: 100px; height: 200px; width: 200px; background-color: red}

<div id='container'>
    <div id='num1'></div>
    <div id='num2'></div>
    <div id='num3'></div>
</div>

当然，不推荐用于非常大的元素。