How to dectect objects' overlaping situations in javascirpt? [closed]

Here is how you can calculate clientX and clientY and then the overlapped area. Calculate co-ordinates of click event and you can draw the Overlapped area. Change dimensions according to your HTML.I am showing just for the shake of approach.

$(".rectangle").click(function(event) {
    if((event.clientX>10  && event.clientX<105) && (event.clientY>15 && event.clientY<105)){
    alert('overlaped border');
<script src=""></script>
 <svg width="400" height="150">
  <rect class="rectangle" width="300" height="100" style="fill:rgb(25,20,255);stroke-width:8;stroke:rgb(25,0,225)" />
   <rect class="rectangle" width="100" height="150" style="fill:rgb(125,125,0);stroke-width:1;stroke:rgb(70,120,150)" />

Browse More Popular Posts

Leave a Comment