Here's a picture explaining the difference between
pageX/Y coordinates are relative to the top left corner of the whole rendered page (including parts hidden by scrolling),
clientX/Y coordinates are relative to the top left corner of the visible part of the page, "seen" through browser window.
You'll probably never need
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.
The visual cues represents:
Screen → the full screen of the monitor (
Position will always be relative to the physical screen's viewport.
Client → the client viewport of the browser (
If you click in the left top corner the value will always be (0,0) independent on scroll position.
Document → the complete document/page (
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
HTML5 with jQuery - e.offsetX is undefined in Firefox
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;
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.