鼠标单击相对于父div左上角的坐标

Question

How to get mouse click coordinates relative to the parent div's top left corner instead of top left corner of the browser's viewport ?

---

Example : If you click on #mydiv in the code below, how to get the coordinates relative to #mydiv 's top left corner?

 mydiv.onclick = function(e) { alert(e.clientX + ' ' + e.clientY); } 

 #blah { position: absolute; top:50px; left:60px; width: 1000px; height: 1000px; background-color: #F0F } #mydiv { position: absolute; top:100px; left:100px; width: 100px; height: 100px; background-color: #FF0 } 

 <div id="blah"><div id="mydiv">Blah</div></div> 

Edited (there was a major mistake in the example).

Answer 1

Try it:

mydiv.onclick = function(e) { 
    var offsets =element_offsets(this.parentNode);
    alert(e.clientX-offsets.left);
    alert(e.clientY-offsets.top);
}


function element_offsets(e) {
    var left = 0, top = 0;
    do {
        left += e.offsetLeft;
        top += e.offsetTop;
    } while (e = e.offsetParent);
    return { left: left, top: top };
}

Answer 2

Below is my code, sorry for using JQuery : but it gives the coordinates of parent element relative to #mydiv .

$('#mydiv').on('click', function(e) { 
    var offs = $('#mydiv').offset();
    alert((e.clientX - offs.left) + ' ' + (e.clientY - offs.top)); 
});

Answer 3

See the script and example from this page:

http://coursesweb.net/javascript/get-mouse-coordinates-inside-div-image_s2