Difference between layerX and offsetX in JavaScript

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.

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.