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.

Another [demo](https://jsfiddle.net/akinuri/313k4hnv/) that uses five different properties (screen, client, page, layer, offset) to get the mouse coordinates. — akinuri, Feb 28 '18 at 10:51

score 748 · Answer 1 · edited Jan 31 '23 at 17:23

748

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

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

edited Jan 31 '23 at 17:23

aderchox

3,163
2
28
37

answered Jan 30 '14 at 09:48

Dan

55,715
40
116
154

I like @SimoEndre's explanation the best – Pierre Sep 01 '14 at 12:40
@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... – Dan Nov 14 '14 at 21:15
24

care to visualize what `screenX/Y` is? – ayjay Jan 09 '15 at 00:47
1

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 Jul 06 '16 at 09:58
the area is in the center of donut chart which is made on canvas using chart.js library – techie_28 Jul 06 '16 at 10:31
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. – AGamePlayer Dec 14 '16 at 08:38
and e.layerX .? – Phoenix404 Mar 03 '17 at 20:19
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] – SidOfc Jul 30 '18 at 13:03
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`. – pesho hristov Feb 06 '19 at 08:31
1

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 – zhouji Oct 09 '19 at 14:56
@ayjay `screenX` and `screenY` are relative to the physical screen, they're completely useless. – Masklinn Sep 02 '21 at 09:02
1

@zhouji you have the entirety of it. [`x` and `y` are defined by the CSSOM-View module as aliases of `clientX` and `clientY`](https://drafts.csswg.org/cssom-view/#extensions-to-the-mouseevent-interface). – Masklinn Sep 02 '21 at 09:07

score 555 · Answer 2 · edited Aug 28 '21 at 11:27

555

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>

edited Aug 28 '21 at 11:27

paraS elixiR

1,866
1
18
26

answered Feb 17 '12 at 21:16

Eric Leschinski

146,994
96
417
335

7

and in jquery offsetX and offsetY are relative to the parent container – Muhammad Umer Mar 30 '14 at 03:12
2

The link to w3schools seems to be only available over the reference section now: http://www.w3schools.com/jsref/tryit.asp?filename=try_dom_event_clientxy – valid Jul 10 '14 at 11:21
2

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. – Robert Monfera Nov 01 '16 at 12:00
4

PageX/PageY & ClientX/clientY explanations are interchanged. you should correct it. it's misleading – ExploreNav Jun 22 '17 at 07:52
1

I think @NavpreetKaur is right. This answer gets it opposite regarding clientX vs pageX – zhouji Oct 09 '19 at 14:44
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). – Code Nov 13 '19 at 02:43
Worth noting that screenX/Y does not take browsers zoom in to account while pageX/Y does. – Mark Baijens Apr 13 '21 at 08:57

score 133 · Answer 3 · edited May 23 '17 at 12:34

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

score 72 · Answer 4 · answered Aug 27 '20 at 08:23

72

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

answered Aug 27 '20 at 08:23

Soner from The Ottoman Empire

18,731
3
79
101

1

The answer has an image :/ – Neil Mar 04 '22 at 11:18
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. – aderchox Jan 31 '23 at 17:28

score 31 · Answer 5 · edited May 19 '17 at 09:30

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!

root · Answer 6 · 2023-03-14T12:16:36.523

18

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

edited Mar 14 '23 at 12:16

answered Dec 29 '22 at 01:54

root

1,812
1
12
26

score 6 · Answer 7 · answered May 20 '11 at 14:42

6

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.

answered May 20 '11 at 14:42

Dominic Barnes

28,083
8
65
90

4

Your answer is good, but it'll become outdated soon http://www.quirksmode.org/mobile/tableViewport_desktop.html – Dan Jan 30 '14 at 09:38

score 0 · Answer 8 · answered Sep 17 '20 at 10:19

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.

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

8 Answers8

See Demo

Full overview, including `offsetX`/`Y`

Linked

Related

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

8 Answers8

See Demo

Full overview, including offsetX/Y

Linked

Related

Full overview, including `offsetX`/`Y`