Question

有没有办法找出一个元素是否被另一个不是第一个元素的元素遮盖了？因为当你点击页面上的任何地方时我有一个我喜欢隐藏的菜单，但是当打开的灯箱打开时，我会隐藏菜单。

Answer 1

你必须自己评估。

考虑最前面元素的坐标和大小，然后检查你需要控制的背后元素的“碰撞”。

这基本上是对重叠方块的检查。

Answer 2

function isObscured(element) {
    // get element at element's position
    var elem = document.elementFromPoint(element.offsetLeft, element.offsetTop);

    // return whether obscured element has same parent node (will also return false if
    // element === elem)
    return elem.parentNode !== element.parentNode;
}

http://jsfiddle.net/pimvdb/tKtEV/

Answer 3

如果您知道哪个元素会遮挡“目标”，则可以使用方法getBoundingClientRect查找遮挡物和“目标”的边缘。然后是finding if two rectangles overlap的问题。

计算该值似乎很艰巨，但是将X轴和Y轴分开是这里的哥伦布蛋。

在以下情况下，两个矩形不重叠

1）它们的X轴范围不重叠

a。 rect1的底部高于rect2的顶部
b。 rect1的顶部低于rect2的底部

2）它们的Y轴范围不重叠

a。 rect1的右边缘在rect2的左边缘的左侧
b。 rect1的左边缘在rect2的右边缘的右侧

否则，也就是说，如果它们的X轴重叠且它们的Y轴也重叠，则它们肯定会重叠。

function overlaps(el1, el2){
  var rect1 = el1.getBoundingClientRect();
  var rect2 = el2.getBoundingClientRect();
  if (rect1.bottom < rect2.top    // 1a
   || rect2.bottom < rect1.top    // 1b
   || rect1.right < rect2.left    // 2a
   || rect2.right < rect1.left) { // 2b
    return false;
  }
  return true;
}

找出一个元素是否被JavaScript模糊

3 个答案: