javascript - What is the difference between screenX/Y, clientX/Y and pageX/Y?

Question

What is the difference between screenX/Y, clientX/Y and pageX/Y?

Also for iPad Safari, are the calculations similar as on desktop—OR there is some difference because of viewport?

It would be great if you could point me to an example.

Answer 1

Here's a picture explaining the difference between pageY and clientY.

Same for pageX and clientX, respectively.

---

pageX/Y coordinates are relative to the top left corner of the whole rendered page (including parts hidden by scrolling),

while clientX/Y coordinates are relative to the top left corner of the visible part of the page, "seen" through browser window.

See Demo

or try this snippet:

document.addEventListener('DOMContentLoaded', _ => {
  const info = document.getElementById('info');
  const updateInfo = event => {
    const { clientX, clientY, pageX, pageY } = event;
    info.innerHTML = `clientX: ${clientX} clientY: ${clientY}<br />  pageX: ${pageX} pageY: ${pageY}`;
  };
  document.addEventListener('mouseover', updateInfo);
  document.addEventListener('mousemove', updateInfo);
});

body {
  border: 1px solid red;
  min-height: 10000px;
  margin: 10px;
}
#info {
  border: 1px solid blue;
  position: fixed;
  top: 80px;
  left: 40px;
}

<h3>Move the mouse around and scroll to see the values of clientX/Y and pageX/Y</h3>
<div id="info"></div>