screenX/Y,clientX/Y和pageX/Y有什么区别？

Question

screenX/Y,clientX/Y和pageX/Y有什么区别？

hmt*_*thr 547 javascript safari ipad mouse-position

screenX/ Y,clientX/ Y和pageX/有Y什么区别？

同样对于iPad Safari,计算与桌面上的计算类似 - 或者由于视口有一些差异？

如果你能指出我的例子,那就太棒了.

Answer 1

Eri*_*ski 471

在JavaScript中:

pageX,pageY,screenX,screenY,clientX,和clientY返回一个数,其指示物理"CSS像素"的数量的点是从参考点.事件点是用户单击的位置,参考点是左上角的一个点.这些属性返回该参考点的水平和垂直距离.

pageX和pageY:
相对于浏览器中完全呈现内容区域的左上角.此参考点位于左上角的URL栏和后退按钮下方.这一点可以在浏览器窗口中的任何位置,并且如果在页面中嵌入了嵌入的可滚动页面并且用户移动滚动条,则实际上可以改变位置.

screenX和screenY:
相对于物理屏幕/监视器的左上角,只有增加或减少监视器数量或监视器分辨率时,此参考点才会移动.

clientX和clientY:
相对于浏览器窗口的内容区域(视口)的左上边缘.即使用户从浏览器中移动滚动条,此点也不会移动.

有关哪些浏览器支持哪些属性的可视化:

http://www.quirksmode.org/dom/w3c_cssom.html#t03

w3schools有一个在线Javascript解释器和编辑器,所以你可以看到每个人做什么

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>

Run Code Online (Sandbox Code Playgroud)

在jquery中,offsetX和offsetY是相对于父容器的 (4认同)
PageX / PageY和ClientX / clientY的说明已互换。您应该纠正它。这是误导 (3认同)
w3schools的链接似乎仅在参考部分提供:http://www.w3schools.com/jsref/tryit.asp？filename =try_dom_event_clientxy (2认同)
我认为这是对 pageX / pageY （因此，问题）的误导或至少无效的解释，因为它引用了 URL 栏和后退按钮，而它更好地根据页面内容进行解释，例如视觉解释答案告诉。另外，w3schools 示例没有帮助，因为它只输出一对 x/y，并且其中没有滚动来证明差异。 (2认同)

Answer 2

Dan*_*Dan 451

这是一张解释之间的差异pageY和clientY.

pageY vs clientY

同样适用于pageX和clientX.

pageX/Y 坐标相对于整个渲染页面的左上角(包括通过滚动隐藏的部分),

而clientX/Y坐标是相对于页面可见部分的左上角,通过浏览器窗口"看到".

见演示

你可能永远不需要 screenX/Y

真棒,感谢演示,比文字解释得更好. (19认同)
关心`screenX/Y`是什么？ (7认同)

Answer 3

End*_*imo 114

pageX/Y给出了<html>CSS像素中相对于元素的坐标.
clientX/Y给出相对于viewportCSS像素的坐标.
screenX/Y给出相对于screen设备内像素的坐标.

关于你的最后一个问题,如果桌面和移动浏览器上的计算相似...为了更好地理解 - 在移动浏览器上 - 我们需要区分两个新概念:布局视口和可视视口.可视视口是当前显示在屏幕上的页面的一部分.布局视口是在桌面浏览器上呈现的完整页面的同义词(具有在当前视口中不可见的所有元素).

在移动浏览器上pageX,pageY它们仍然相对于CSS像素中的页面,因此您可以获得相对于文档页面的鼠标坐标.另一方面clientX,clientY定义与可视视口相关的鼠标坐标.

这里有另一个stackoverflow线程,关于可视视口和布局视口之间的差异:可视视口和布局视口之间的差异？

另一个很好的资源:http://www.quirksmode.org/mobile/viewports2.html

那么“offsetX/Y”呢？ (4认同)

Answer 4

snr*_*snr 45

我不喜欢和理解可以通过视觉来解释的东西。

Answer 5

小智 25

帮助我的是直接在这个页面上添加一个事件并点击自己!在开发人员工具/ Firebug等中打开你的控制台并粘贴它:

document.addEventListener('click', function(e) {
  console.log(
    'page: ' + e.pageX + ',' + e.pageY,
    'client: ' + e.clientX + ',' + e.clientY,
    'screen: ' + e.screenX + ',' + e.screenY)
}, false);

Run Code Online (Sandbox Code Playgroud)