javascript - 要素が他の要素と重なっているかどうかを確認する方法は?

Question

2 つの div 要素があります。それぞれの幅と高さは 450px です。最初の div が 2 番目の div と重なっているかどうかを確認するにはどうすればよいですか?

javascript hittest を使用しようとしましたが、少し複雑です。実際にどのように機能するかを調べているので、より単純なコードから始めたいと思います。

.getClientRectsを使用して要素の境界を取得できることがわかりましたが、境界を比較する方法が正確にはわかりません。

教えてください！

Answer 1

このようなものは、 getBoundingClientRect()rect1を介してrect2取得されます:

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

説明: 括弧内の 1 つ以上の式が である場合true、重複はありません。すべてがfalseの場合、オーバーラップが存在する必要があります。

Answer 2

element.getBoundingClientRect() は、最新のブラウザーでは静かで、画面に対する境界を提供します。ここを見てくださいバウンディングボックスが重なるかどうかをテストするよりも、それは単純なジオメトリです...

ああ、すみません...あなたの編集が遅すぎました...

Answer 3

バージョン 8 より前の Internet Explorer では、返されたTextRectangleオブジェクトには物理ピクセル サイズの座標が含まれていましたが、バージョン 8 以降では、論理ピクセル サイズの座標が含まれています。

要素全体の境界矩形が必要な場合は、getBoundingClientRectメソッドを使用します。