Question

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

我尝试过使用javascript hittest，但它有点复杂。因为我试图找出它实际上是如何工作的，所以我想开始使用更简单的代码。

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

请告诉我！

Answer 1

通过getBoundingClientRect()检索rect1和rect2这样的内容：

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

解释：如果括号中的一个或多个表达式是true，则没有重叠。如果全部为false，则必须重叠。

Answer 2

这是我几天前做的事情： 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))
    );
  }
};

Answer 3

element.getBoundingClientRect（）在现代浏览器中很安静，可以提供相对于屏幕的边界。 look here比测试边界框是否重叠，即简单几何...

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

Answer 4

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

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

如何检查元素是否与其他元素重叠？

4 个答案: