Home javascript What's the difference between pageX / Y, clientX / Y, screenX /...

What’s the difference between pageX / Y, clientX / Y, screenX / Y in Javascript?




Examples with some visuals will be very helpful.

Translator’s note:

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.

Free translation of the question: What is the difference between pageX / Y clientX / Y screenX / Y in Javascript?
by contributor @Inquisitive

Answer 1, authority 100%

Visual cues represent:

yellowScreen → Full monitor screen (screenX / Y )
The position will always be relative to the physical viewport.

BlueClient → 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`.

RedDocument → Full document / page (pageX / Y )
Note that the `pageX / pageY` event is the` UIEvent` object [not standardized] [1].

All values ​​are in pixels.

 enter image description here

Free translation response from user [@ user1693593] (profile link).

Answer 2, authority 86%

Iterative Example

jsBin DEMO

 enter image description here

CLIENT → The Browser window

clientX and clientY = (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

pageX , 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
(or jQuery’s $ ("html, body"). scrollTop () )

SCREEN → Your Screen

screenX and screenY are the values ​​(px ) of the current position of the mouse cursor relative to the physical display .

Free translation of the answer What is the difference between pageX / Y clientX / Y screenX / Y in Javascript? by member @Roko C. Buljan .

Programmers, Start Your Engines!

Why spend time searching for the correct question and then entering your answer when you can find it in a second? That's what CompuTicket is all about! Here you'll find thousands of questions and answers from hundreds of computer languages.

Recent questions