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

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

我试过使用javascript hittest，但它有点复杂。由于我试图找出它是如何工作的，我想开始使用更简单的代码。

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

请告诉我！

来源

2012-08-22 Moon

http://stackoverflow.com/questions/4230029/jquery-javascript-collision-detection可以看到，如果这可以帮助你。 – user1071979

所以你问的是，给定一组边界矩形，你如何确定哪些重叠？ – Blender

@Blender //完全是 – Moon

像这样的rect1和rect2通过getBoundingClientRect()检索：

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

说明：如果在parenthese一个或多个表情true，没有重叠。如果全部都是false，则必须有重叠。

来源

2012-08-22 05:54:23

完美地工作...并且比谷歌上其他的测试功能更容易！ – Moon

刚刚发现这只有在两个元素都可见时才有效 - 真遗憾！ – graygilmore

这真棒，我能够用这个替换我的JQuery解决方案（涉及到需要抓住左侧位置/高度并做数学运算），并且它提高了很多性能。 Thanks @Buu – Johannes

element.getBoundingClientRect（）在现代浏览器中很安静，它提供了相对于屏幕的边界。看here比试验，如果边界框重叠，这是简单的几何图形...

哦对不起......找到了你的编辑为时已晚......

来源

2012-08-22 05:40:49 philipp

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

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

来源

2012-08-22 05:51:24

这里的东西我前几天发了言：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)) 
    ); 
    } 
};

来源

2013-10-27 03:05:13 yckart

里面可以简化为：'rect1.top <= rect2.bottom && rect1.bottom> = rect2.top && rect1.left <= rect2.right && rect1.right> = rect2.left' –

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

回答

相关问题