如何检查一个元素是否与其他元素重叠？ [复制]答案

【问题标题】：How to check if an element is overlapping other elements? [duplicate]如何检查一个元素是否与其他元素重叠？ [复制]
【发布时间】：2012-08-17 12:10:45
【问题描述】：

我有两个 div 元素。它们每个都有 450 像素的宽度和高度。如何检查第一个 div 是否与第二个 div 重叠？

我尝试使用 javascript hittest，但它有点复杂。由于我试图了解它的实际工作原理，因此我想从更简单的代码开始。

我发现我可以使用 .getClientRects 来获取元素的边界，但我不确定如何比较边界。

请给我建议！

【问题讨论】：

stackoverflow.com/questions/4230029/… 看看这对你有没有帮助。
那么你要问的是，给定一个边界矩形数组，你如何确定哪些重叠？
只是好奇为什么它标记为重复，因为 OP 中没有 jQuery 引用。

标签： javascript boundary

【解决方案1】：

element.getBoundingClientRect() 在现代浏览器中非常安静，提供相对于屏幕的边界。看here比测试边界框是否重叠，就是简单的几何...

哦，对不起……发现你的编辑太晚了……

【讨论】：

【解决方案2】：

在早于版本 8 的 Internet Explorer 中，返回的 TextRectangle 对象包含物理像素大小的坐标，而从版本 8 开始，它包含逻辑像素大小的坐标。

如果您需要整个元素的边界矩形，请使用getBoundingClientRect 方法。

【讨论】：

【解决方案3】：

通过getBoundingClientRect() 检索到的rect1 和rect2 的类似内容：

var overlap = !(rect1.right < rect2.left || 
                rect1.left > rect2.right || 
                rect1.bottom < rect2.top || 
                rect1.top > rect2.bottom)

说明：如果括号中的一个或多个表达式是true，则不存在重叠。如果都是false，肯定有重叠。

【讨论】：

刚刚发现这仅在两个元素当前可见时才有效 - 可惜！
将逻辑切换为使用&& 在它们不重叠的情况下会带来微小的性能提升吗？
删除否定并扭转检查使代码更快更容易推理。此外，通过当前检查，允许边缘接触而不是重叠。 < 和 <= 的区别。
在具有 2 个固定元素的 Firefox 中无法正常工作

【解决方案4】：

这是我几天前做的：https://gist.github.com/yckart/7177551

var AABB = {
  collide: function (el1, el2) {
    var rect1 = el1.getBoundingClientRect();
    var rect2 = el2.getBoundingClientRect();

    return !(
      rect1.top > rect2.bottom ||
      rect1.right < rect2.left ||
      rect1.bottom < rect2.top ||
      rect1.left > rect2.right
    );
  },

  inside: function (el1, el2) {
    var rect1 = el1.getBoundingClientRect();
    var rect2 = el2.getBoundingClientRect();

    return (
      ((rect2.top <= rect1.top) && (rect1.top <= rect2.bottom)) &&
      ((rect2.top <= rect1.bottom) && (rect1.bottom <= rect2.bottom)) &&
      ((rect2.left <= rect1.left) && (rect1.left <= rect2.right)) &&
      ((rect2.left <= rect1.right) && (rect1.right <= rect2.right))
    );
  }
};

【讨论】：

里面可以简化为：rect1.top <= rect2.bottom && rect1.bottom >= rect2.top && rect1.left <= rect2.right && rect1.right >= rect2.left