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

fd3cxomn 于 2021-09-13 发布在 Java

关注(0)|答案(4)|浏览(310)

此问题已在此处找到答案：

jquery/javascript冲突检测（7个答案）
5年前关闭。
我有两个div元素。每个都有450像素的宽度和高度。如何检查第一个div是否与第二个div重叠？
我尝试过使用javascript hittest，但它有点复杂。由于我试图了解它实际上是如何工作的，所以我想从一个更简单的代码开始。
我发现我可以使用.getClientries来获取元素的边界，但我不确定如何比较边界。
请告诉我！

JavaScript boundary

来源：https://stackoverflow.com/questions/68342183/how-to-detect-when-a-div-touching-a-div-and-making-its-gavity-in-plain-js-withou

4条答案

按热度按时间

s1ag04yj1#

像这样的东西 rect1 及 rect2 通过getboundingclientrect（）检索：

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

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

赞(0）回复(0）举报 2021-09-13

hi3rlvi22#

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

赞(0）回复(0）举报 2021-09-13

fnatzsnv3#

getboundingclientrect（）在现代浏览器中非常好，提供了相对于屏幕的边界。看这里，然后测试边界框是否重叠，这是简单的几何体。。。
哦，对不起。。。发现你的编辑太晚了。。。

赞(0）回复(0）举报 2021-09-13

mzaanser4#

在早于版本8的internet explorer中，返回的textrectangle对象包含物理像素大小的坐标，而在版本8中，它包含逻辑像素大小的坐标。
如果需要整个元素的边框，请使用getboundingclientrect方法。

赞(0）回复(0）举报 2021-09-13