В чем разница между pageX/Y, clientX/Y, screenX/Y в Javascript?

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

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

Client → Клиент viewport браузера (clientX/Y)
Если вы кликнете в левом верхнем углу,то значение всегда будет(0,0) независимо от `scroll position`.

Document → Полный документ / страница (pageX/Y)
Учтите, что pageX/pageY событие UIEvent object are not standardized.

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

Перевод ответа: What is the difference between pageX/Y clientX/Y screenX/Y in Javascript? @K3N

Итерактивный пример

jsBin DEMO

CLIENT → The Browser window

clientX и clientY = значения (px) положения мыши относительно границ viewport экрана браузера

Tip:
Даже, если вы прокручиваете документ, значения будут всегда одинаковые

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

pageX, pageY = значениям в (px), положения курсора мыши, относительно левого, верхнего угла документа.

Tip:
Если вы прокручиваете документ, например вертикально pageY значение изменяется, потому что это новая верхняя позиция курсора мыши внутри вашего элемента.
Также стоит отметить, что:
event.pageY - event.clientY === document.documentElement.scrollTop
( или jQuery's $("html, body").scrollTop() )

SCREEN → Ваш экран

screenX и screenY являются значениями (px) текущей позиции курсора мыши относительно физического дисплея.

Перевод ответа: What is the difference between pageX/Y clientX/Y screenX/Y in Javascript? @Roko C. Buljan