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

Question

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

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

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

请建议我!

Answer 1

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

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