Difference between layerX and offsetX in JavaScript

Question

There are different co-ordinate system for JavaScript, such as e.clientX, e.screenX.

I understand those two well, but there are some like e.layerX and e.offsetX. These two are not very clear to me.

Can someone explain those two co-ordinates for me?

Answer 1

offsetX/offsetY are a neat extension by Microsoft to mouse event objects, and mean the position of the mouse pointer relatively to the target element. Sadly, they're not implemented by Firefox, and there's discordance among the other browsers about what should be the origin point: IE thinks it's the content box, while Chrome, Opera and Safari the padding box (which makes more sense, since it's the same origin of absolutely positioned elements).

layerX/layerY are properties of MouseEvent objects defined by Gecko-based browsers (Firefox et al.). Some say they're substitutes for offsetX/offsetY - they're not. They're the position of the mouse relatively to the "closest positioned element", i.e. an element whose position style property is not static. That's not the target element if it's statically positioned.

They're supported by Chrome and Opera, but they (layerX/layerY) are deprecated and going to be removed soon. So forget about them.

Answer 2

LayerX and LayerY Retrieves the x-coordinate, y-coordinate respectively of the mouse pointer relative to the top-left corner of the closest positioned ancestor element of the element that fires the event.

OffsetX, OffsetY sets or retrieves the x-coordinate, y-coordinates of the mouse pointer relative to the top-left corner of the offsetParent element of the element that fires the event. Offset Parent element returns a reference to the closest ancestor element in the DOM hierarchy from which the position of the current element is calculated.