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>

Note: You'll probably never need screenX/Y

Answer 2

In JavaScript:

pageX, pageY, screenX, screenY, clientX, and clientY returns a number which indicates the number of logical “CSS pixels” an event point is from the reference point. The event point is where the user clicked and the reference point is a point in the upper left. These properties return the horizontal and vertical distance of the event point from that reference point.

pageX and pageY:
Relative to the top left of the fully rendered content area in the browser. This reference point is below the URL bar and back button in the upper left. This point could be anywhere in the browser window and can actually change location if there are embedded scrollable pages embedded within pages and the user moves a scrollbar.

screenX and screenY:
Relative to the top left of the physical screen/monitor, this reference point only moves if you increase or decrease the number of monitors or the monitor resolution.

clientX and clientY:
Relative to the upper left edge of the content area (the viewport) of the browser window. This point does not move even if the user moves a scrollbar from within the browser.

For a visual on which browsers support which properties:

http://www.quirksmode.org/dom/w3c_cssom.html#t03

<script>     function showCoordinates(event){         var x = event.clientX;         var y = event.clientY;         alert(`X coordinates: ${x}, Y coordinates: ${y}`);     } </script> <p onmousedown="showCoordinates(event)">     Click this paragraph, and an alert box will show the x     and y coordinates of the mouse relative to the viewport </p>