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.

Macroclimate

Another demo that uses five different properties (screen, client, page, layer, offset) to get the mouse coordinates. – Megaphone

An updated version of the same demo: akinuri.github.io/mouse-position – Megaphone

Answer 1

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

Same for pageX and clientX and screenX, 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.

screenX/Y are relative to the physical screen.

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

Sematic

I like @SimoEndre's explanation the best – Freefloating

@EricLeschinski, IMHO it is difficult to understand your description of clientX/Y. Some people could think that upper left corner of the browser window is the place where close button is on Mac. I would rather recommend to replace the current explanation (using imaginary moving point) with something like "the difference between pageX and clientX coordinates of the point is that first are relative to the top left corner of the whole page, while the second are relative to the top left corner of the visible part". People have different picture in their mind but probably my version is simpler... – Sematic

care to visualize what screenX/Y is? – Patrickpatrilateral

I want to bind a click event on a particular rectangular area on the page so pageX/pageY should be used instead of clientX/clientY? – Check

the area is in the center of donut chart which is made on canvas using chart.js library – Check

if you scroll the browser and click the exact RED point again. In some devices, the clientY is changed but in a few, it's not. This is quite annoying. – Sniffle

and e.layerX .? – Hight

Thanks, indeed this image speaks (at least) a thousand words! [rant] These explanations become quite abstract quite fast, especially when talking not about one or two, but rather 3 - 5 of these f*cking properties... I wonder what's next in JS, perhaps a planetX and planetY prop on mouse scroll so you can measure the distance you scrolled from / to the moon T.T [/rant] – Manion

Very useful, thanks :) One more tip - if you have element with position:fixed - then use clientX/clientY. And if you have element with position:absolute - based on the whole page - then use pageX/pageY. – Bistort

what about the simple x and y? They seem the same as clientX/Y when I tried it but I didn't find a definitive reference on it – Maloy

@Patrickpatrilateral screenX and screenY are relative to the physical screen, they're completely useless. – Goby

@Maloy you have the entirety of it. x and y are defined by the CSSOM-View module as aliases of clientX and clientY. – Goby

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>

Lillian

and in jquery offsetX and offsetY are relative to the parent container – Repeated

The link to w3schools seems to be only available over the reference section now: w3schools.com/jsref/tryit.asp?filename=try_dom_event_clientxy – Burchfield

I think it's a misleading or at least ineffective explanation for pageX / pageY (and by consequence, the question) because it makes a reference to the URL bar and back button whereas it's better explained in terms of the page contents as in e.g. the visual explanation answer tells. Also, the w3schools example isn't helpful as it only outputs one x/y pair, and there's no scrolling in it which would demonstrate the difference. – Fetor

PageX/PageY & ClientX/clientY explanations are interchanged. you should correct it. it's misleading – Leduc

I think @NavpreetKaur is right. This answer gets it opposite regarding clientX vs pageX – Maloy

The definitions of clientX/Y and pageX/Y were incorrectly swapped on Jul 2019. I have just reverted them back to the original (which is correct). – Stempson

Worth noting that screenX/Y does not take browsers zoom in to account while pageX/Y does. – Harrington

Answer 3

1. pageX/Y gives the coordinates relative to the <html> element in CSS pixels.
2. clientX/Y gives the coordinates relative to the viewport in CSS pixels.
3. screenX/Y gives the coordinates relative to the screen in device pixels.

Regarding your last question if calculations are similar on desktop and mobile browsers... For a better understanding - on mobile browsers - we need to differentiate two new concept: the layout viewport and visual viewport. The visual viewport is the part of the page that's currently shown onscreen. The layout viewport is synonym for a full page rendered on a desktop browser (with all the elements that are not visible on the current viewport).

On mobile browsers the pageX and pageY are still relative to the page in CSS pixels so you can obtain the mouse coordinates relative to the document page. On the other hand clientX and clientY define the mouse coordinates in relation to the visual viewport.

There is another stackoverflow thread here regarding the differences between the visual viewport and layout viewport : Difference between visual viewport and layout viewport?

Another good resource: http://www.quirksmode.org/mobile/viewports2.html

Norbert

What about offsetX/Y? – Gallaher

Answer 4

I don't like and understand things, which can be explained visually, by words.

Roybal

The answer has an image :/ – Nuss

It could be a bit misleading, pageY could actually be longer than the screenY. Of course pageX vs screenX has shown this correctly for the careful eyes. I've also edited the accepted answer's picture to illustrate this. – Passim

Answer 5

What helped me was to add an event directly to this page and click around for myself! Open up your console in developer tools/Firebug etc and paste this:

document.addEventListener('click', function(e) {
  console.log(
    'page: ' + e.pageX + ',' + e.pageY,
    'client: ' + e.clientX + ',' + e.clientY,
    'screen: ' + e.screenX + ',' + e.screenY)
}, false);

Click anywhere

With this snippet, you can track your click position as you scroll, move the browser window, etc.

Notice that pageX/Y and clientX/Y are the same when you're scrolled all the way to the top!

Tannate

Answer 6

Full overview, including offsetX/Y

Other interesting properties are offsetX/Y (offset between the mouse and the border of the clicked element/node). Here's a fuller picture:

Source

Hygienic

Answer 7

The difference between those will depend largely on what browser you are currently referring to. Each one implements these properties differently, or not at all. Quirksmode has great documentation regarding browser differences in regards to W3C standards like the DOM and JavaScript Events.

Okra

Your answer is good, but it'll become outdated soon quirksmode.org/mobile/tableViewport_desktop.html – Sematic

Answer 8

clientX/Y refers to relative screen coordinates, for instance if your web-page is long enough then clientX/Y gives clicked point's coordinates location in terms of its actual pixel position while ScreenX/Y gives the ordinates in reference to start of page.

Iodoform