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


Answers

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

You'll probably never need screenX/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.




What is the difference between pageX/Y clientX/Y screenX/Y in Javascript?

The visual cues represents:

Screen → the full screen of the monitor (screenX/Y)
Position will always be relative to the physical screen's viewport.

Client → the client viewport of the browser (clientX/Y)
If you click in the left top corner the value will always be (0,0) independent on scroll position.

Document → the complete document/page (pageX/Y)
Note that pageX/pageY on the UIEvent object are not standardized.

All values are in pixels.




Generally, the differences are:

  • page x/y: the x or y coordinate as relative the to the fully rendered page (i.e., it considers the entire height and width of the page/document, not just what is currently being shown on screen)
  • screen x/y: the x or y coordinate as relative to the physical screen.
  • client x/y: the x or y coordinate as relative to the client (browser) window (or iframe inside the window.

Here is a page where you can test the differences dynamically.




I think the ViewPort is just an area to display the web content in the browser. And different browsers have their own setting for the size of ViewPort, For example, the default ViewPort width of Safari is 980 pixels. So, if the actual web page you want to see is smaller than 980 pixels, there should be a blank display area in the Safari when accessing the web page in the Safari by default. Hence, that is the reason sometimes we need to configure the ViewPort for better web content display in the browser.

Like below, for example:

<meta name="viewport" content="width=device-width">

And also please read Paul's answer. I think he already explained the usage of ViewPort.




HTML5 with jQuery - e.offsetX is undefined in Firefox

Try using layerX and layerY for Firefox and offsetX for other browser.

If event fired with jquery:

xpos = e.offsetX === undefined ? e.originalEvent.layerX : e.offsetX;
ypos = e.offsetY === undefined ? e.originalEvent.layerY : e.offsetY;

If event fired with javascript:

xpos = e.offsetX==undefined?e.layerX:e.offsetX;
ypos = e.offsetY==undefined?e.layerY:e.offsetY;



You did not find them because its in the originalEvent. try: e.originalEvent.layerX e.originalEvent.layerY

About the pageX and pageY they are not calculating the same thing. layerX is the left of the object from the first relative/absolute parent. pageX is the left of the object from the page.