Difference between layerX and offsetX in JavaScript

javascript coordinate-systems
AL-zami picture AL-zami · Apr 22, 2014 · Viewed 17.1k times · Source

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

MaxArt picture MaxArt · Apr 22, 2014

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.

Related questions

Three.js - How to get camera position with respect to origin

The title of this question might a bit ambiguous, but I don't know how to phrase it in a line. Basically I've got this situation: there is a perspective camera in the scene and a mesh. The mesh is NOT …

Read More
How to find the coordinate that is closest to the point of origin?

I know there are many many questions about sorting javascript arrays by multiple values, but none of the answers solved my problem. I have an array of coordinates like: x | y -------- 10 20 12 18 20 30 5 40 100 2 How can I get the coordinate that is …

Read More
How can I remove a specific item from an array?

I have an array of numbers and I'm using the .push() method to add elements to it. Is there a simple way to remove a specific element from an array? I'm looking for the equivalent of something like: array.remove(…

Read More