如何检查一个元素是否与其他元素重叠？
我有两个div元素。 他们每个人都有450px的宽度和高度。 如何检查第一个div是否与第二个div重叠？
我试图使用JavaScript的testing，但它有点复杂。 因为我试图找出它是如何工作的，所以我想开始一个简单的代码。
我发现我可以使用.getClientRects获取元素的边界，但是我不确定如何比较边界。
请build议我！
像这样的rect1和rect2通过getBoundingClientRect（）获取：
var overlap = !(rect1.right < rect2.left || rect1.left > rect2.right || rect1.bottom < rect2.top || rect1.top > rect2.bottom)
解释：如果括号中的一个或多个expression式是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（）在现代浏览器中很安静，提供了相对于屏幕的边界。 看这里比testing，如果边界框重叠，这是简单的几何…
哦原谅我…发现你的编辑太迟了…
在早于版本8的Internet Explorer中，返回的TextRectangle对象包含物理像素大小的坐标，而从版本8开始，它包含逻辑像素大小的坐标。
如果您需要整个元素的边界矩形，请使用getBoundingClientRect方法。
