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

javascript ipad safari mouse-position

262,336

Solution 1

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

pageY vs 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

Solution 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>

Solution 3

pageX/Y gives the coordinates relative to the <html> element in CSS pixels.
clientX/Y gives the coordinates relative to the viewport in CSS pixels.
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

Solution 4

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

Solution 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!

View more solutions

262,336

Author by

hmthr

Updated on July 08, 2022

Comments

hmthr almost 2 years

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.
- akinuri about 6 years
  
  Another demo that uses five different properties (screen, client, page, layer, offset) to get the mouse coordinates.
Dan over 10 years

Your answer is good, but it'll become outdated soon quirksmode.org/mobile/tableViewport_desktop.html
Muhammad Umer about 10 years

and in jquery offsetX and offsetY are relative to the parent container
Rahul Prasad almost 10 years

Awesome, Thanks for the Demo, explains better than text.
valid almost 10 years

The link to w3schools seems to be only available over the reference section now: w3schools.com/jsref/tryit.asp?filename=try_dom_event_clientx‌y
Pierre over 9 years

I like @SimoEndre's explanation the best
Dan over 9 years

@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...
ayjay over 9 years

care to visualize what screenX/Y is?
techie_28 almost 8 years

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?
techie_28 almost 8 years

the area is in the center of donut chart which is made on canvas using chart.js library
Robert Monfera over 7 years

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.
AGamePlayer over 7 years

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.
Phoenix404 about 7 years

and e.layerX .?
ExploreNav almost 7 years

PageX/PageY & ClientX/clientY explanations are interchanged. you should correct it. it's misleading
SidOfc almost 6 years

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]
pesho hristov about 5 years

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.
zhouji over 4 years

I think @NavpreetKaur is right. This answer gets it opposite regarding clientX vs pageX
zhouji over 4 years

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
Code over 4 years

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).
Mark Baijens about 3 years

Worth noting that screenX/Y does not take browsers zoom in to account while pageX/Y does.
Venryx almost 3 years

What about offsetX/Y?
Masklinn over 2 years

@ayjay screenX and screenY are relative to the physical screen, they're completely useless.
Masklinn over 2 years

@zhouji you have the entirety of it. x and y are defined by the CSSOM-View module as aliases of clientX and clientY.
Neil about 2 years

The answer has an image :/