Examples with some visuals will be very helpful.
This topic has been marked on enSO as a duplicate question:
What is the difference between screenX / Y, clientX / Y and pageX / Y?
Indeed, the title is almost 100% the same, but the content of the answers is much inferior, in my opinion, to the translated answers with enSO in this topic.
They are more detailed, with good graphic illustrations, with interactive examples.
Therefore, this topic was chosen for translation. And on ruSO, similar questions were asked more than once, which indicates the interest in this issue.
by contributor @Inquisitive
Answer 1, authority 100%
Visual cues represent:
Screen → Full monitor screen (
screenX / Y )
The position will always be relative to the physical viewport.
Client → Browser viewport client (
clientX / Y )
If you click in the upper left corner, the value will always be (0,0) regardless of the `scroll position`.
Document → Full document / page (
pageX / Y )
Note that the `pageX / pageY` event is the` UIEvent` object [not standardized] .
All values are in pixels.
Free translation response from user [@ user1693593] (profile link).
Answer 2, authority 86%
CLIENT → The Browser window
(px) values for mouse position relative to the
viewport browser screen
Even if you scroll through the document, the values will always be the same
PAGE → Entire Document
pageY = values in (px), the position of the mouse cursor, relative to the upper left corner of the document.
If you scroll the document, for example vertically
pageY the value changes because this is the new top position of the mouse cursor within your element.
It is also worth noting that:
event.pageY - event.clientY === document.documentElement.scrollTop
$ ("html, body"). scrollTop () )
SCREEN → Your Screen
screenY are the values (
px ) of the current position of the mouse cursor relative to the physical display .