Is there a function to get cursor position within an element no matter what the padding/margin is on it or its parents?

Question

Do any of the browsers provide this directly? or may be through one of the libraries?

All I could find was some examples of how to iterate through the hierarchy to add up all the margins and paddings. Is that the only way?

Answer 1

Modern browsers provide some pointer-related properties of an event object, allowing you determine the X,Y coordinates of the mouse pointer for events such as clicking a button or moving the mouse.

Of such properties, you are likely to find one relative to the event's target , although this may depend on the browser and may not be consistent across different browser vendors.

Use jQuery's mouse position features to abstract away differences between browsers.

Answer 2

ScreenX/ScreenY has the correct cursor position Demo

Properties documented here: http://www.quirksmode.org/js/events_properties.html#position