Last active
February 15, 2022 19:06
-
-
Save simonwoo/304a8cd832e77d020d53 to your computer and use it in GitHub Desktop.
the difference between pageX,pageY,ScreenX,ScreenY,ClientX,ClientY
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
In JavaScript: | |
pageX, pageY, screenX, screenY, clientX and clientY returns a number which indicates the number of physical 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 the 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 browser window. This point can move when the user moves/resizes the browser around the monitor. This point does not move if the user moves a scrollbar from within the browser. |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment