jQuery onclick: position X / Y

Question

I have a div with position relative in this div are another divs that are absolute positioned. Now I want to receive the PositionX and PositionY Coordinates. It works very well when I click on a "free" spot in the div but when I click on a absolute positioned element inside this div I get wrong coordinates.

https://jsfiddle.net/vqb56uf3/2/

 $(".relative").click(function(e) { $(".clickIndicator").css({ "left": e.offsetX + "px", "top": e.offsetY + "px", "display": "block" }); }); 

 .relative { position: relative; width: 500px; height: 300px; background: black; } .absolute { position: absolute; height: 30px; width: 30px; background: white; } .clickIndicator { position: absolute; border-radius: 100px; width: 10px; height: 10px; background: red; display: none; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="relative"> <div class="clickIndicator"></div> <div class="absolute" style="top: 30px; left: 90px;"></div> <div class="absolute" style="top: 200px; left: 340px;"></div> <div class="absolute" style="top: 140px; left: 79px;"></div> <div class="absolute" style="top: 230px; left: 211px;"></div> <div class="absolute" style="top: 90px; left: 450px;"></div> <div class="absolute" style="top: 80px; left: 260px;"></div> </div> 

Answer 1

To get the coords relatively the window use pageX and pageY .

The mouse position relative to the left edge of the document

Also, you can calculate relatively the element by increase the .relative position, like this:

 $(".relative").click(function(e) { var offset = $(this).offset(); $(".clickIndicator").css({ "left": e.pageX - offset.left + "px", "top": e.pageY - offset.top + "px", "display": "block" }); }); 

 .relative { position: relative; width: 500px; height: 300px; background: black; } .absolute { position: absolute; height: 30px; width: 30px; background: white; } .clickIndicator { position: absolute; border-radius: 100px; width: 10px; height: 10px; background: red; display: none; z-index: 1; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="relative"> <div class="clickIndicator"></div> <div class="absolute" style="top: 30px; left: 90px;"></div> <div class="absolute" style="top: 200px; left: 340px;"></div> <div class="absolute" style="top: 140px; left: 79px;"></div> <div class="absolute" style="top: 230px; left: 211px;"></div> <div class="absolute" style="top: 90px; left: 450px;"></div> <div class="absolute" style="top: 80px; left: 260px;"></div> </div> 

Answer 2

The offset is relative to the event target. To get the X,Y co-ordinates of the click event you need to take the location of the target into account. The old school JavaScript way to do this is as follows:

var element = e.target,
    bodyRect = document.body.getBoundingClientRect(),
    elemRect = element.getBoundingClientRect(),
    offsetX  = elemRect.left - bodyRect.left + e.offsetX,
    offsetY  = elemRect.top - bodyRect.top + e.offsetY;