In JS, how can I get the mouse coordinates inside a DIV?

Question

In JS, how can I get the mouse coordinates inside a DIV? if I use event.pageX, it will only work if the DIV is at the top left corner of the page... otherwise, I have to know the position of the DIV in the page and subtract event.pageX from that. This is hard to do when I generate the DIVs dynamically since I have to keep track of the position of each DIV. Any ideas?

Answer 1

It sounds to me like you answered your own question. I'm not aware of any shortcuts for finding the cursor position from within a div simpler than subtracting the x and y coordinates of the mouse from the x and y coordinates of the upper left corner of the div. Just make sure you cache the location of the div as it changes to avoid a DOM lookup each time the mouse cursor moves.

Answer 2

It's not too hard. Each element has an offsetTop and offsetLeft property. You can use that with current mouse position to figure out the relative position.

Answer 3

It seems like event.layerX and event.layerY works find in FF if I define the DIV with an absolute position. Here is a short example:

http://www.zangware.com/divpos.html

But in IE, event.layerX/Y is undefined inside the DIV. Any ideas?