Friday, October 13, 2017

clientX/Y, pageX/Y, screenX/Y etc

To get the position relative to the top-left corner of the document, use the pageX and pageY properties.
To get the position of the mouse pointer relative to the top-left corner of the browser window's client area, use use the clientX and clientY properties.
To get the position relative to the top-left corner of the screen, use the screenX and screenY properties.

pageX/Y gives the coordinates relative to the <html> element in CSS pixels.
clientX/Y gives the coordinates relative to the viewport in CSS pixels.
screenX/Y gives the coordinates relative to the screen in device pixels.

pageX/Y coordinates are relative to the top left corner of the whole rendered page (including parts hidden by scrolling)
clientX/Y coordinates are relative to the top left corner of the visible part of the page, "seen" through browser window.
screenX/Y coordinates are relative to the screen, You'll probably never need them in code

http://help.dottoro.com/ljsqnefp.php

There are some other rare attributes for reference only, you'll probably never need them.
layerX
layerY
offsetX
offsetY
x
y

For instance, x/y: Sets or retrieves the x-coordinate of the mouse pointer relative to the top-left corner of the closest relatively positioned ancestor element of the element that fires the event. But x property always returns the position relative to the top-left corner of the document in Google Chrome and Safari.

In summary, Use clientX/Y in most cases.

No comments:

Post a Comment