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

User · Answer

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

User · Answer

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

User · Answer

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    x000D   x000D  document addEventListener  click   function e    x000D    console log  x000D       page      e pageX         e pageY  x000D       client      e clientX         e clientY  x000D       screen      e screenX         e screenY  x000D     false   x000D  Click anywhere x000D   x000D   x000D    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

User · Answer

pageX Y gives the coordinates relative to the  lt html gt  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

User · Answer

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

User · Answer

In JavaScript   pageX  pageY  screenX  screenY  clientX  and clientY returns a number which indicates the number of physical    CSS pixels    a point is from the reference point   The event point is where the user clicked  the reference point is a point in the upper left   These properties return the horizontal and vertical distance 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  w3schools has an online Javascript interpreter and editor so you can see what each does  http   www w3schools com jsref tryit asp filename try dom event clientxy   x000D   x000D   lt  DOCTYPE html gt  x000D   lt html gt  x000D   lt head gt  x000D   lt script gt  x000D  function show coords event  x000D    x000D    var x event clientX  x000D    var y event clientY  x000D    alert  X coords      x      Y coords      y   x000D    x000D   lt  script gt  x000D   lt  head gt  x000D   x000D   lt body gt  x000D   x000D   lt p onmousedown  show coords event   gt Click this paragraph   x000D  and an alert box will alert the x and y coordinates  x000D  of the mouse pointer  lt  p gt  x000D   x000D   lt  body gt  x000D   lt  html gt  x000D   x000D   x000D

User · Answer

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

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

See Demo

Examples related to javascript

Examples related to ipad

Examples related to safari

Examples related to mouse-position