Javascript 中的 pageX/Y clientX/Y screenX/Y 有什么区别？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/9262741/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
What is the difference between pageX/Y clientX/Y screenX/Y in Javascript?
提问by Inquisitive
An example with some visual cue would be really helpful.
一个带有一些视觉提示的例子会非常有帮助。
回答by
The visual cues represents:
视觉提示代表：
Screen→ the full screen of the monitor (screenX/Y)
Position will always be relative to the physical screen's viewport.
屏幕→ 显示器的全屏 ( screenX/Y)
位置将始终相对于物理屏幕的视口。
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.
客户端→ 浏览器的客户端视口 ( clientX/Y)
如果您单击左上角，该值将始终为 (0,0) 独立于滚动位置。
Document→ the complete document/page (pageX/Y)
Note that pageX/pageYon the UIEventobject are not standardized.
文档→ 完整文档/页面 ( pageX/Y)
注意，对象上的pageX/不是标准化的。pageYUIEvent
All values are in pixels.
所有值都以像素为单位。
回答by Roko C. Buljan
CLIENT → The Browser window
客户端 →浏览器窗口
clientXclientY= values (px) of the mouse position relative to the Browser's viewport boundaries.
Tip:
Even if you scroll the Document, the values are always the same
clientXclientY=px鼠标位置相对于浏览器视口边界的值 ( )。
提示：
即使您滚动文档，值也始终相同
PAGE → The Whole Document
页 →整个文件
pageXpageY= values (px) of the mouse position relative to the Document most-top/left "sides".
Tip:
If you scroll the Document (i.e) vertically, pageYvalue changes cause it's the new mouse Top Position inside your Document.
Also it's worth noting that:event.pageY - event.clientY === document.documentElement.scrollTop( or jQuery's $("html, body").scrollTop())
pageXpageY=px鼠标位置相对于文档最顶部/左侧“侧面”的值 ( )。
提示：
如果您垂直滚动文档（即），pageY值更改会导致它成为文档内的新鼠标顶部位置。
另外值得注意的是：（event.pageY - event.clientY === document.documentElement.scrollTop或jQuery的$("html, body").scrollTop()）
SCREEN → Your Screen
屏幕 →您的屏幕
screenXand screenYare the values (px) of the current mouse position relative to the physical screen.
(No tip for this one ;))
screenX和screenY是px当前鼠标位置相对于物理屏幕的值 ( ) 。
（这个没有提示;））
回答by James
Generally, the differences are:
一般来说，区别是：
- page x/y: the x or y coordinate as relative the to the fully rendered page (i.e., it considers the entire height and width of the page/document, not just what is currently being shown on screen)
- screen x/y: the x or y coordinate as relative to the physical screen.
- client x/y: the x or y coordinate as relative to the client (browser) window (or iframe inside the window.
- 页面 x/y：相对于完全渲染页面的 x 或 y 坐标（即，它考虑页面/文档的整个高度和宽度，而不仅仅是当前显示在屏幕上的内容）
- 屏幕 x/y：相对于物理屏幕的 x 或 y 坐标。
- 客户端 x/y：相对于客户端（浏览器）窗口（或窗口内的 iframe）的 x 或 y 坐标。
Hereis a page where you can test the differences dynamically.
这是一个页面，您可以在其中动态测试差异。
