Mouse click coordinates relative to the parent div's top left corner

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).

@MarcB yes but do we have to walk recursively all the parent, grand-parent, grand-grand-parent `div` and add their offset? Would this be a really clean solution? — Basj, Jan 13 '15 at 20:53
@AshishMishra I posted a StackOverflow code snippet, it's similar to a jsfiddle — Basj, Jan 13 '15 at 20:57
http://stackoverflow.com/questions/2159044/getting-the-x-y-coordinates-of-a-mouse-click-on-an-image-with-jquery — Etheryte, Jan 13 '15 at 21:01
Means you want to get top left corner of #blah element ?? when you click inside #mydiv...right ?? — ashbuilds, Jan 13 '15 at 21:04
@Basj: the other option is the browser/js engine waste a ton of cpu cycles recalculating offsets for all elements on every dom change. — Marc B, Jan 13 '15 at 21:07
Oh you're right @AshishMishra, I did a mistake in the question. Corrected now: `if you click on #mydiv in the code below, how to get the coordinates relative to #mydiv's top left corner? ` — Basj, Jan 13 '15 at 23:16

Inanda Menezes · Answer 1 · 2015-01-14T12:28:58.520

2

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 };
}

edited Jan 14 '15 at 12:28

answered Jan 13 '15 at 21:11

Inanda Menezes

1,796
13
17

It does not work (you can try in my example) because it does not add each offset of each parent / grandparent / grandgrandparent div – Basj Jan 13 '15 at 23:14
Ah ok, I did not know it could have grandparents. I fixed the answer to add each offset. – Inanda Menezes Jan 14 '15 at 12:29

score 2 · Accepted Answer · edited Jan 14 '15 at 09:08

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)); 
});

edited Jan 14 '15 at 09:08

Basj

41,386
99
383
673

answered Jan 14 '15 at 05:12

ashbuilds

1,401
16
33

score 0 · Answer 3 · answered Jan 14 '15 at 09:20

0

See the script and example from this page:

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

answered Jan 14 '15 at 09:20

CoursesWeb

4,179
3
21
27

I think this doesn't work if there is a `div` with offset inside another `div` with offset : we should sum all the offsets, don't we? – Basj Jan 14 '15 at 12:24

Mouse click coordinates relative to the parent div's top left corner

3 Answers3