Difference between layerX and offsetX in JavaScript

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.

Leave a Comment

Hata!: SQLSTATE[HY000] [1045] Access denied for user 'divattrend_liink'@'localhost' (using password: YES)