Les repères visuels représentent:

Écran → l'écran complet du moniteur ( screenX/Y )
La position sera toujours relative à la fenêtre d'affichage de l'écran physique.

Client → la fenêtre client du navigateur ( clientX/Y )
Si vous cliquez sur le coin supérieur gauche, la valeur sera toujours (0,0) indépendante en position de défilement.

Document → le document / page pageX/Y ( pageX/Y )
Notez que pageX / pageY sur l'objet UIEvent ne sont pas normalisés .

Toutes les valeurs sont en pixels.

JsBin DEMO

CLIENT → La fenêtre du navigateur

clientX clientY = valeurs ( px ) de la position de la souris par rapport aux limites de la fenêtre du navigateur.
_{Pointe:
Même si vous faites défiler le document, les valeurs sont toujours les mêmes}

PAGE → Le document entier

pageX pageY = valeurs ( px ) de la position de la souris par rapport aux côtés supérieurs / supérieurs du document "côtés".
_{Pointe:
Si vous faites défiler le document (c.-à-d.) Verticalement, les pageY valeur de la page font que c'est la nouvelle position supérieure de la souris à l'intérieur de votre document.
Aussi, il convient de noter que:
event.pageY - event.clientY === document.documentElement.scrollTop (ou jQuery's $("html, body").scrollTop() )}

ECRAN → Votre écran

screenX et screenY sont les valeurs ( px ) de la position actuelle de la souris par rapport à l' écran physique .
_{(Aucun conseil pour celui-ci;))}

Généralement, les différences sont les suivantes:

• Page x / y: la coordonnée x ou y comme relative par rapport à la page entièrement rendue (c'est-à-dire qu'elle considère toute la taille et la largeur de la page / document, pas seulement ce qui est actuellement affiché à l'écran)
• Écran x / y: la coordonnée x ou y par rapport à l'écran physique.
• Client x / y: la coordonnée x ou y par rapport à la fenêtre client (navigateur) (ou iframe à l'intérieur de la fenêtre).

Voici une page où vous pouvez tester dynamiquement les différences.