What is the difference between pageX/Y clientX/Y screenX/Y in Javascript? [duplicate]

Answer 1

jsBin DEMO

CLIENT → The Browser window

clientX clientY = values (px) of the mouse position relative to the Browser's viewport boundaries.
_{Tip:
Even if you scroll the Document, the values are always the same}

---

PAGE → The Whole Document

pageX pageY = values (px) of the mouse position relative to the Document most-top/left "sides".
_{Tip:
If you scroll the Document (i.e) vertically, pageY value changes cause it's the new mouse Top Position inside your Document.
Also it's 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 mouse position relative to the physical screen.
_{(No tip for this one ;))}

Answer 2

Generally, the differences are:

• page x/y: the x or y coordinate as relative the to the fully rendered page (i.e., it considers the entire height and width of the page/document, not just what is currently being shown on screen)
• screen x/y: the x or y coordinate as relative to the physical screen.
• client x/y: the x or y coordinate as relative to the client (browser) window (or iframe inside the window.

Here is a page where you can test the differences dynamically.

Answer 3

The visual cues represents:

Screen → the full screen of the monitor (screenX/Y)
Position will always be relative to the physical screen's viewport.

Client → the client viewport of the browser (clientX/Y)
If you click in the left top corner the value will always be (0,0) independent on scroll position.

Document → the complete document/page (pageX/Y)
Note that pageX/pageY on the UIEvent object are not standardized.

All values are in pixels.