69

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

我尝试使用 javascript hittest，但它有点复杂。由于我试图找出它实际上是如何工作的，我想从一个更简单的代码开始。

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

请给我提意见！

4

4 回答 4

129

像这样的东西rect1并通过getBoundingClientRect()rect2检索：

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

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

于 2012-08-22T05:54:23.177 回答
18

这是我几天前做的东西：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))
    );
  }
};
于 2013-10-27T03:05:13.890 回答
2

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

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

于 2012-08-22T05:40:49.457 回答
1

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

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

于 2012-08-22T05:51:24.487 回答