我有两个 div 元素。它们每个都有 450px 的宽度和高度。如何检查第一个 div 是否与第二个 div 重叠？
我尝试使用 javascript hittest，但它有点复杂。由于我正在尝试了解它的实际工作原理，因此我想从更简单的代码开始。
我发现我可以使用.getClientRects来获取元素的边界，但我不确定如何比较边界。
请给我提意见！
如何检查一个元素是否与其他元素重叠？
IT技术
javascript
boundary
2021-01-22 06:12:12
4个回答
事情是这样的rect1，并rect2通过检索getBoundingClientRect（） ：
var overlap = !(rect1.right < rect2.left ||
rect1.left > rect2.right ||
rect1.bottom < rect2.top ||
rect1.top > rect2.bottom)
说明：如果括号中的一个或多个表达式是true，则没有重叠。如果都是false，则必须有重叠。
这是我几天前做的事情：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))
);
}
};
element.getBoundingClientRect() 在现代浏览器中非常好用，提供相对于屏幕的边界。看这里比测试边界框是否重叠，这是简单的几何...
哦，对不起……发现您的编辑太晚了……
在版本 8 之前的 Internet Explorer 中，返回的TextRectangle对象包含物理像素大小的坐标，而从版本 8 开始，它包含逻辑像素大小的坐标。
如果需要整个元素的边界矩形，请使用getBoundingClientRect方法。