Javascript screenX/Y、clientX/Y 和 pageX/Y 有什么区别？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/6073505/
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 screenX/Y, clientX/Y and pageX/Y?
提问by hmthr
What is the difference between screenX/Y, clientX/Yand pageX/Y?
screenX/ Y、clientX/Y和pageX/之间有什么区别Y？
Also for iPad Safari, are the calculations similar as on desktop—OR there is some difference because of viewport?
同样对于 iPad Safari，计算是否与在桌面上相似——或者由于视口而存在一些差异？
It would be great if you could point me to an example.
如果你能给我举个例子，那就太好了。
回答by Eric Leschinski
In JavaScript:
在 JavaScript 中：
pageX, pageY, screenX, screenY, clientX, and clientYreturns a number which indicates the number of physical “CSS pixels” a point is from the reference point. The event point is where the user clicked, the reference point is a point in the upper left. These properties return the horizontal and vertical distance from that reference point.
pageX, pageY, screenX, screenY, clientX, 并clientY返回一个数字，该数字表示一个点距参考点的物理“CSS 像素”数。事件点是用户点击的地方，参考点是左上角的一个点。这些属性返回与该参考点的水平和垂直距离。
pageXand pageY:
Relative to the top left of the fully rendered content area in the browser. This reference point is below the URL bar and back button in the upper left. This point could be anywhere in the browser window and can actually change location if there are embedded scrollable pages embedded within pages and the user moves a scrollbar.
pageX和pageY：
相对于浏览器中完全呈现的内容区域的左上角。此参考点位于左上角的 URL 栏和后退按钮下方。该点可以位于浏览器窗口中的任何位置，并且如果页面中嵌入了可滚动页面并且用户移动滚动条，则该点实际上可以更改位置。
screenXand screenY:
Relative to the top left of the physical screen/monitor, this reference point only moves if you increase or decrease the number of monitors or the monitor resolution.
screenX和screenY：
相对于物理屏幕/显示器的左上角，仅当您增加或减少显示器数量或显示器分辨率时，此参考点才会移动。
clientXand clientY:
Relative to the upper left edge of the content area (the viewport) of the browser window. This point does not move even if the user moves a scrollbar from within the browser.
clientX和clientY：
相对于浏览器窗口内容区域（视口）的左上边缘。即使用户从浏览器中移动滚动条，该点也不会移动。
For a visual on which browsers support which properties:
有关哪些浏览器支持哪些属性的视觉效果：
http://www.quirksmode.org/dom/w3c_cssom.html#t03
http://www.quirksmode.org/dom/w3c_cssom.html#t03
w3schools has an online Javascript interpreter and editor so you can see what each does
w3schools 有一个在线 Javascript 解释器和编辑器，所以你可以看到它们的作用
http://www.w3schools.com/jsref/tryit.asp?filename=try_dom_event_clientxy
http://www.w3schools.com/jsref/tryit.asp?filename=try_dom_event_clientxy
<!DOCTYPE html>
<html>
<head>
<script>
function show_coords(event)
{
var x=event.clientX;
var y=event.clientY;
alert("X coords: " + x + ", Y coords: " + y);
}
</script>
</head>
<body>
<p onmousedown="show_coords(event)">Click this paragraph,
and an alert box will alert the x and y coordinates
of the mouse pointer.</p>
</body>
</html>回答by Dan
Here's a picture explaining the difference between pageYand clientY.
这是一张图片，解释了pageY和之间的区别clientY。
Same for pageXand clientX, respectively.
pageX和clientX分别相同。
pageX/Ycoordinates are relative to the top left corner of the whole rendered page (including parts hidden by scrolling),
pageX/Y坐标相对于整个渲染页面的左上角（包括滚动隐藏的部分），
while clientX/Ycoordinates are relative to the top left corner of the visible part of the page, "seen" through browser window.
而clientX/Y坐标相对于页面可见部分的左上角，通过浏览器窗口“看到”。
See Demo
看演示
You'll probably never need screenX/Y
你可能永远不需要 screenX/Y
回答by Endre Simo
- pageX/Ygives the coordinates relative to the
<html>element in CSS pixels. - clientX/Ygives the coordinates relative to the
viewportin CSS pixels. - screenX/Ygives the coordinates relative to the
screenin device pixels.
- pageX/Y
<html>以 CSS 像素给出相对于元素的坐标。 - clientX/Y给出相对于
viewportCSS 像素的坐标。 - screenX/Y给出相对于
screen设备像素的坐标。
Regarding your last question if calculations are similar on desktop and mobile browsers... For a better understanding - on mobile browsers - we need to differentiate two new concept: the layout viewportand visual viewport. The visual viewport is the part of the page that's currently shown onscreen. The layout viewport is synonym for a full page rendered on a desktop browser (with all the elements that are not visible on the current viewport).
关于您的最后一个问题，桌面和移动浏览器上的计算是否相似......为了更好地理解 - 在移动浏览器上 - 我们需要区分两个新概念：布局视口和视觉视口。视觉视口是当前显示在屏幕上的页面部分。布局视口是在桌面浏览器上呈现的完整页面的同义词（包含在当前视口上不可见的所有元素）。
On mobile browsers the pageXand pageYare still relative to the page in CSS pixels so you can obtain the mouse coordinates relative to the document page. On the other hand clientXand clientYdefine the mouse coordinates in relation to the visual viewport.
在移动浏览器上，pageX和pageY仍然以 CSS 像素相对于页面，因此您可以获得相对于文档页面的鼠标坐标。另一方面clientX，clientY定义与视觉视口相关的鼠标坐标。
There is another stackoverflow thread here regarding the differences between the visual viewport and layout viewport : Difference between visual viewport and layout viewport?
这里有另一个关于视觉视口和布局视口之间差异的 stackoverflow 线程：视觉视口和布局视口之间的区别？
Another good resource: http://www.quirksmode.org/mobile/viewports2.html
回答by fierysunset
What helped me was to add an event directly to this page and click around for myself! Open up your console in developer tools/Firebug etc and paste this:
帮助我的是直接在此页面上添加一个事件并为自己单击！在开发人员工具/Firebug 等中打开您的控制台并粘贴：
document.addEventListener('click', function(e) {
console.log(
'page: ' + e.pageX + ',' + e.pageY,
'client: ' + e.clientX + ',' + e.clientY,
'screen: ' + e.screenX + ',' + e.screenY)
}, false);Click anywhereWith this snippet, you can track your click position as you scroll, move the browser window, etc.
使用此代码段，您可以在滚动、移动浏览器窗口等时跟踪点击位置。
Notice that pageX/Y and clientX/Y are the same when you're scrolled all the way to the top!
请注意，当您一直滚动到顶部时，pageX/Y 和 clientX/Y 是相同的！
回答by Dominic Barnes
The difference between those will depend largely on what browser you are currently referring to. Each one implements these properties differently, or not at all. Quirksmodehas great documentation regarding browser differences in regards to W3C standards like the DOM and JavaScript Events.
它们之间的区别在很大程度上取决于您当前所指的浏览器。每个人都以不同的方式实现这些属性，或者根本不实现。Quirksmode有大量关于浏览器在 W3C 标准（如 DOM 和 JavaScript 事件）方面的差异的文档。
