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

This question already has an answer here:

这个问题在这里已有答案：

jQuery/JavaScript collision detection 6 answers
jQuery / JavaScript碰撞检测6个答案

I have two div elements. Each of them have 450px width and height. How do I check if the first div is overlapping the second div?

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

I've tried to use javascript hittest, but it's a little bit complicated. Since I'm trying to find out how it actually work, I would like to get started with a simpler code.

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

I found out that I can use .getClientRects to get the boundary of an element, but I'm not exactly sure how to compare boundaries.

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

Please advise me!

请建议我！

4 个解决方案

#1

Something like this for rect1 and rect2 retrieved via getBoundingClientRect():

通过getBoundingClientRect（）检索的rect1和rect2是这样的：

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

Explain: if one or more expressions in the parenthese are true, there's no overlapping. If all are false, there must be an overlapping.

解释：如果括号中的一个或多个表达式为真，则没有重叠。如果一切都是假的，那么必须有重叠。

#2

Here's something I made some days ago: https://gist.github.com/yckart/7177551

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

#3

element.getBoundingClientRect() is quiet good in modern browsers, delivers a bounding relative to the screen. look here Than test if the bounding boxes overlap, that is simple geometry...

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

oh excuse me... found your edit too late...

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

#4

In Internet Explorer earlier than version 8, the returned TextRectangle object contains the coordinates in physical pixel size, while from version 8, it contains the coordinates in logical pixel size.

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

If you need the bounding rectangle of the entire element, use the getBoundingClientRect method.

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

#1