Différence entre screenX, clientX, pageX


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

Blue 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.

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

All values are in pixels.

screen snapshot with extended page illustration


Simulateur



https://jsbin.com/dilumuz/3/edit?html,css,js,console,output