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

Question

An example with some visual cue would be really helpful.

Answer 1

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.

Answer 2

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.

Mouse coordinates example:

const EL = (sel, par) => (par||document).querySelector(sel);
EL("body").addEventListener("mousemove", (evt) => {
  ["client","page","screen"].forEach(mod => {
    EL(`#${mod}-x`).textContent = evt[mod+"X"];
    EL(`#${mod}-y`).textContent = evt[mod+"Y"];
  });
});

* {margin:0; box-sizing: border-box;}
body{
  height: 300vh; /* just to force some scrollbars */
  font: 14px/1.5 monospace;
}
table{
  position:fixed;
  border-spacing:0; 
  border-collapse: collapse;
}
table td{
  vertical-align:bottom;
  border:1px solid #ddd;
  padding:3px 10px;
}
table tr:first-child{
  background:#ddd;
}

<table>
  <tr><td>Mouse position inside:</td><td>X</td><td>Y</td></tr>
  <tr><td><b>screen</b> display</td><td id="screen-x"></td><td id="screen-y"></td></tr>
  <tr><td><b>client</b> viewport</td><td id="client-x"></td><td id="client-y"></td></tr>
  <tr><td><b>page</b> document (scroll to see diff))</td><td id="page-x"></td><td id="page-y"></td></tr>
</table>

• Additional read for Mouse XY coordinates depending on parent / child positions

Answer 3

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.