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.
jsBin DEMO
clientX
clientY
= values (px
) of the mouse position relative to the Browser's viewport boundaries.
Tip:
Even if you scroll the Document, the values are always the same
pageX
pageY
= values (px
) of the mouse position relative to the Document most-top/left "sides".
Tip:
If you scroll the Document (i.e) vertically, pageY
value changes cause it's the new mouse Top Position inside your Document.
Also it's worth noting that:event.pageY - event.clientY === document.documentElement.scrollTop
( or jQuery's $("html, body").scrollTop()
)
screenX
and screenY
are the values (px
) of the current mouse position relative to the physical screen.
(No tip for this one ;))
Generally, the differences are:
Here is a page where you can test the differences dynamically.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With