JavaScript：检测 DOM 元素是否与 DOM 元素重叠、在内部或外部？

Question

I'm making a small game in JavaScript. I've created a small example js fiddle demo link . There are three situations as listed bellow:

• A: Outside of target object.
• B: Overlaping with target object's border.
• C: Inside of target object.

According to Have object detect if completely inside other object JavaScript , I've known how to detect if the object inside of target (Situation C). How about situation A and B?

<div class="main">
    <div class="target"></div>
    <div class="obj">A</div>
    <div style="top:15%; left:50%;" class="obj">B</div>
    <div style="top:25%; left:35%;" class="obj">C</div>
</div>

Answer 1

One way to do this would be to use Element#getBoundingClientRect() to obtain the absolute coordinates of the DOM elements being classified for overlap, containment, etc.

This function returns to top , right , bottom and left coordiates of the corresponding DOM element which you can use to determine containment of an element with respect to a container .

You could implement a function like findContainment() shown below, where the containment of element is classified against a container element:

 function findContainment(element, container) { /* Obtain the bounding rectangle for each element */ const brE = element.getBoundingClientRect() const brC = container.getBoundingClientRect() /* If the boundaries of container pass through the boundaries of element then classifiy this as an overlap */ if ( /* Does container left or right edge pass through element? */ (brE.left < brC.left && brE.right > brC.left) || (brE.left < brC.right && brE.right > brC.right) || /* Does container top or bottom edge pass through element? */ (brE.top < brC.top && brE.bottom > brC.top) || (brE.top < brC.bottom && brE.bottom > brC.bottom)) { return "overlap"; } /* If boundaries of element fully contained inside bounday of container, classify this as containment of element in container */ if ( brE.left >= brC.left && brE.top >= brC.top && brE.bottom <= brC.bottom && brE.right <= brC.right ) { return "contained" } /* Otherwise, the element is fully outside the container */ return "outside" } const main = document.querySelector(".main") console.log("A", findContainment(document.querySelector(".a"), main)) console.log("B", findContainment(document.querySelector(".b"), main)) console.log("C", findContainment(document.querySelector(".c"), main)) console.log("D", findContainment(document.querySelector(".d"), main)) console.log("E", findContainment(document.querySelector(".e"), main))

 .main { width: 50%; height: 200px; border: 5px solid #000; position: relative; } .obj { width: 40px; height: 40px; border: 1px solid blue; position: absolute; }

 <div class="main"> <div style="top:105%; left:25%;" class="obj a">A</div> <div style="top:15%; left:-5%;" class="obj b">B</div> <div style="top:20%; left:40%;" class="obj c">C</div> <div style="top:20%; left:110%;" class="obj d">D</div> <div style="top:90%; left:95%;" class="obj e">E</div> </div>

Here's a working fiddle as well - hope that helps!