Javascript中pageX/Y clientX/Y screenX/Y有什么区别？

Question

有一些视觉提示的例子会非常有用.

Answer 1

视觉线索代表:

屏幕 →显示器的全屏(screenX/Y)
位置始终相对于物理屏幕的视口.

客户端 →浏览器的客户端视口(clientX/Y)
如果单击左上角,则值将始终(0,0)独立于滚动位置.

文档 →完整的文档/页面(pageX/Y)
注意pageX/ 对象pageY上的/ 不是标准化的.UIEvent

所有值都以像素为单位.

Answer 2

jsBin DEMO

客户端→ 浏览器窗口

clientX clientY= px鼠标位置相对于浏览器视口边界的值().
_{提示:
即使您滚动文档,值也始终相同}

PAGE→ 整个文件

pageX pageY= px鼠标位置相对于文档最上/左"边"的值().
_{提示:
如果您垂直滚动文档(即),则pageY值更改会导致它是文档中的新鼠标顶部位置.
另外值得注意的是:(
event.pageY - event.clientY === document.documentElement.scrollTop或jQuery的$("html, body").scrollTop())}

屏幕→ 您的屏幕

screenX并且screenY是px当前鼠标位置相对于物理屏幕的值().
_{(这个没有提示;))}

Answer 3

一般来说,差异是:

• page x/y:x或y坐标相对于完全呈现的页面(即,它考虑页面/文档的整个高度和宽度,而不仅仅是当前在屏幕上显示的内容)
• screen x/y:相对于物理屏幕的x或y坐标.
• client x/y:相对于客户端(浏览器)窗口(或窗口内的iframe)的x或y坐标.

这是一个可以动态测试差异的页面.