Ответ 1

Визуальные подсказки представляют:

Экран → полный экран монитора (screenX/Y)
Позиция всегда будет относиться к физическому экрану просмотра.

Клиент → окно просмотра клиента браузера (clientX/Y)
Если вы щелкните в левом верхнем углу, значение всегда будет (0,0) независимым от положения прокрутки.

Документ → полный документ/страница (pageX/Y)
Обратите внимание, что pageX/pageY объекта UIEvent не стандартизированы.

Все значения находятся в пикселях.

Ответ 2

jsBin DEMO

КЛИЕНТ → Окно браузера

clientX clientY= значения (px) положения мыши относительно границ окна просмотра браузера.
<Суб > Совет:
Даже если вы прокручиваете документ, значения всегда одинаковы

PAGE → Весь документ

pageX pageY= значения (px) положения мыши относительно сторон документа "Самый верхний/левый".
<Суб > Совет:
Если вы прокрутите документ (i.e) по вертикали, значение pageY изменится, это приведет к появлению новой верхней позиции мыши в вашем документе.
Также стоит отметить, что:
event.pageY - event.clientY === document.documentElement.scrollTop (или jQuery $("html, body").scrollTop())

SCREEN → Ваш экран

screenX и screenY - значения (px) текущей позиции мыши относительно физического экрана .
_{(Нет подсказки для этого;))}

Ответ 3

Как правило, различия заключаются в следующем:

• page x/y: координата x или y как относительная относительно полностью отображаемой страницы (т.е. она учитывает всю высоту и ширину страницы/документа, а не только то, что в настоящее время отображается на экране)
• screen x/y: координата x или y относительно физического экрана.
• client x/y: координата x или y относительно окна клиента (браузера) (или iframe внутри окна.

Здесь - это страница, где вы можете протестировать различия динамически.