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

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

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

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

---

请告诉我

element.getBoundingClientRect（）在现代浏览器中非常好，提供了相对于屏幕的边界。查看并测试边界框是否重叠，这是简单的几何体

---

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

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

---

如果您需要整个元素的边框，请使用以下方法。

对于通过以下方式检索的

rect1

和

rect2

，使用类似的方法：

var重叠=！（rect1.rightrect2.right | |
rect1.bottomrect2.bottom）

---

解释：如果括号中的一个或多个表达式为

true

，则不存在重叠。如果所有的

false

，那么一定有重叠。

这是我几天前做的一件事：

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))
    );
  }
};

var AABB={
碰撞：函数（el1、el2）{
var rect1=el1.getBoundingClientRect（）；
var rect2=el2.getBoundingClientRect（）；
回来(
rect1.top>rect2.bottom||
rect1.rightrect2.right
);
},
内部：功能（el1、el2）{
var rect1=el1.getBoundingClientRect（）；
var rect2=el2.getBoundingClientRect（）；
返回(
(（rect2.top）您可以看看这是否有帮助。那么您要问的是，给定一组边界矩形，如何确定哪些矩形重叠？只是好奇为什么它标记为重复的，因为OP中没有jQuery引用。刚刚发现这只在两个元素当前都可见的情况下起作用-很遗憾！切换逻辑会吗在不重叠的情况下使用
&&
会稍微提高性能吗？删除否定项并旋转检查使代码更快、更容易推理。此外，当前检查允许边缘接触而不是重叠。firefox中两个固定元素的
之间的差异不起作用ngInside可以简化为：
rect1.top=rect2.top&&rect1.left=rect2.left
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))
    );
  }
};