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

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/12066870/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-08-23 07:03:03  来源:igfitidea点击:

How to check if an element is overlapping other elements?

javascriptboundary

提问by Moon

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 .getClientRectsto get the boundary of an element, but I'm not exactly sure how to compare boundaries.

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

Please advise me!

请建议我!

回答by Buu Nguyen

Something like this for rect1and rect2retrieved via getBoundingClientRect():

事情是这样的rect1,并rect2通过检索getBoundingClientRect()

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.

说明:如果括号中的一个或多个表达式是true,则没有重叠。如果都是false,则必须有重叠。

回答by yckart

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

回答by philipp

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

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

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

哦,对不起……发现您的编辑太晚了……

回答by Vishal Suthar

In Internet Explorer earlier than version 8, the returned TextRectangleobject 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 getBoundingClientRectmethod.

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