Question

I’m moving the mouse over a div and I want to know the mouse coordinates with respect to the div origin. (upper left corner)

I expected the mousemove event to contain the relative (client?) coordinates of the mouse, but apparently it doesn’t.

In firefox for instance, none of the event properties* contain relative coordinates

Am I missing something?

*clientX,Y – pageX,Y – screenX, y

Answer 1

You’re not missing anything, but you’ll need to calculate the relative coordinates yourself.

Something along these lines should do it (substitute jquery with w/e code you want to use to get the position):

var pos = $('div').position();
var relX = event.pageX - pos.left;
var relY = event.pageY - pos.top;

Also see: JS: mouse coordinates relative to an element which covers some of the details on supporting other browsers (though if you’re using jquery that may not be needed).