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

时间:2011-05-20 14:38:26

标签: javascript ipad safari mouse-position

screenX / YclientX / YpageX / Y之间的区别是什么?

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

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

7 个答案:

答案 0 :(得分:445)

在JavaScript中:

pageXpageYscreenXscreenYclientXclientY会返回一个数字,表示物理“CSS的数量像素“一个点来自参考点。事件点是用户单击的位置,参考点是左上角的一个点。这些属性返回该参考点的水平和垂直距离。

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

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

clientXclientY
相对于浏览器窗口的内容区域(the viewport)的左上边缘。即使用户从浏览器中移动滚动条,此点也不会移动。

有关哪些浏览器支持哪些属性的视觉效果:

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>

答案 1 :(得分:408)

以下是解释pageYclientY之间差异的图片。

pageY vs clientY

分别与pageXclientX相同。


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

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

See Demo

您可能永远不需要screenX/Y

答案 2 :(得分:111)

  1. pageX / Y 以CSS像素为单位给出相对于<html>元素的坐标。
  2. clientX / Y 以CSS像素为单位给出相对于viewport的坐标。
  3. screenX / Y 提供相对于设备像素中screen的坐标。
  4. 关于您的最后一个问题,如果桌面和移动浏览器上的计算相似...为了更好地理解 - 在移动浏览器上 - 我们需要区分两个新概念:布局视口视觉视口。可视视口是当前显示在屏幕上的页面的一部分。布局视口是桌面浏览器上呈现的完整页面的同义词(包含当前视口中不可见的所有元素)。

    在移动浏览器上,pageXpageY仍然相对于CSS像素中的页面,因此您可以获取相对于文档页面的鼠标坐标。另一方面,clientXclientY定义与可视视口相关的鼠标坐标。

    这里有另一个stackoverflow线程,关于可视视口和布局视口之间的差异:Difference between visual viewport and layout viewport?

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

答案 3 :(得分:23)

帮助我的是直接在此页面添加活动并点击自己!在开发人员工具/ Firebug等中打开您的控制台并粘贴它:

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

使用此代码段,您可以在滚动,移动浏览器窗口等时跟踪您的点击位置。

请注意,当您一直滚动到顶部时,pageX / Y和clientX / Y是相同的!

答案 4 :(得分:10)

我不喜欢和理解事物,这些事物可以用文字直观地解释。

enter image description here

答案 5 :(得分:5)

这些差异很大程度上取决于您当前所指的浏览器。每个都以不同方式实现这些属性,或者根本不实现。 Quirksmode提供了有关浏览器与DOM和JavaScript事件等W3C标准差异的文档。

答案 6 :(得分:1)

clientX / Y指的是相对屏幕坐标,例如,如果您的网页足够长,则clientX / Y会根据其实际像素位置给出点击点的坐标位置,而ScreenX / Y则以参考点的开始位置为坐标页面。