Mouse position data from the DOM
in order from the point closest to the mouse to the furthest:
layerX, layerY
- deprecated
- relative to top left of the closest positioned DOM element (all elements that are not
position: static)
offsetX, offsetY
- relative to top left rof the target element (i.e. the top left of the element with grey background color)
- when you're selecting by
getElementById or ref.current (react), the offsetX and offsetY refers to the mouse pos in relation to the element you just selected
clientX, clientY
- relative to top left of the browser viewport (the browser window)
- point does not move even if the user scrolls within the browser
- literally, what the user is seeing on the browser viewport.
x, y
- same as
clientX and clientY
pageX, pageY
- relative to top left of the
<html> element - scrolling moves the top left point upward and out of the browser viewport
screenX, screenY
- relative to top left of the monitor screen
- changes if you increase / decrease the monitor resolution or the no. of monitors.