screenX/Y、clientX/Y和pageX/Y有什么区别？答案

【问题标题】：What is the difference between screenX/Y, clientX/Y and pageX/Y?screenX/Y、clientX/Y和pageX/Y有什么区别？
【发布时间】：2011-08-29 17:34:43
【问题描述】：

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

同样对于 iPad Safari，计算是否与桌面上的相似，或者由于视口而存在一些差异？

如果你能给我举个例子就好了。

【问题讨论】：

另一个demo 使用五个不同的属性（屏幕、客户端、页面、图层、偏移）来获取鼠标坐标。

标签： javascript ipad safari mouse-position

【解决方案1】：

这是一张解释pageY 和clientY 之间区别的图片。

pageX 和 clientX 分别相同。

pageX/Y坐标相对于整个渲染页面的左上角（包括被滚动隐藏的部分），

虽然clientX/Y 坐标是相对于页面可见部分的左上角，但通过浏览器窗口“可见”。

See Demo

或试试这个 sn-p：

document.addEventListener('DOMContentLoaded', _ => {
  const info = document.getElementById('info');
  const updateInfo = event => {
    const { clientX, clientY, pageX, pageY } = event;
    info.innerHTML = `clientX: ${clientX} clientY: ${clientY}<br />  pageX: ${pageX} pageY: ${pageY}`;
  };
  document.addEventListener('mouseover', updateInfo);
  document.addEventListener('mousemove', updateInfo);
});

body {
  border: 1px solid red;
  min-height: 10000px;
  margin: 10px;
}
#info {
  border: 1px solid blue;
  position: fixed;
  top: 80px;
  left: 40px;
}

<h3>Move the mouse around and scroll to see the values of clientX/Y and pageX/Y</h3>
<div id="info"></div>

注意：你可能永远不需要screenX/Y

【讨论】：

太棒了，感谢演示，比文字解释得更好。
想看看screenX/Y是什么？
我想在页面的特定矩形区域绑定点击事件，所以应该使用pageX/pageY而不是clientX/clientY？
简单的 x 和 y 呢？当我尝试时，它们似乎与 clientX/Y 相同，但我没有找到明确的参考
@zhouji 你拥有它的全部。 x and y are defined by the CSSOM-View module as aliases of clientX and clientY.

【解决方案2】：

在 JavaScript 中：

pageX、pageY、screenX、screenY、clientX 和 clientY 返回一个数字，该数字指示事件点距参考点的逻辑“CSS 像素”数。事件点是用户点击的地方，参考点是左上角的一个点。这些属性返回事件点到该参考点的水平和垂直距离。

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

screenX 和 screenY：
相对于物理屏幕/显示器的左上角，此参考点仅在您增加或减少显示器数量或显示器分辨率时才会移动。

clientX 和 clientY：
相对于浏览器窗口的内容区域 (the viewport) 的左上角。即使用户从浏览器中移动滚动条，该点也不会移动。

查看哪些浏览器支持哪些属性：

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

<script>
    function showCoordinates(event){
        var x = event.clientX;
        var y = event.clientY;
        alert(`X coordinates: ${x}, Y coordinates: ${y}`);
    }
</script>
<p onmousedown="showCoordinates(event)">
    Click this paragraph, and an alert box will show the x
    and y coordinates of the mouse relative to the viewport
</p>

【讨论】：

并且在jquery中offsetX和offsetY是相对于父容器的
w3schools 的链接现在似乎只能通过参考部分获得：w3schools.com/jsref/tryit.asp?filename=try_dom_event_clientxy
我认为这是对 pageX / pageY 的误导或至少无效的解释（因此，问题），因为它引用了 URL 栏和后退按钮，而根据页面内容如视觉解释答案告诉我们。此外，w3schools 示例没有帮助，因为它只输出一个 x/y 对，并且其中没有显示差异的滚动。
PageX/PageY 和 ClientX/clientY 解释互换。你应该纠正它。这是误导
我认为@NavpreetKaur 是对的。这个答案与clientX vs pageX相反

【解决方案3】：

pageX/Y 以 CSS 像素表示相对于 <html> 元素的坐标。
clientX/Y 以 CSS 像素为单位给出相对于 viewport 的坐标。
screenX/Y 给出相对于screen 的坐标（以设备像素为单位）。

关于您的最后一个问题，桌面和移动浏览器上的计算是否相似...为了更好地理解 - 在移动浏览器上 - 我们需要区分两个新概念：layout viewport 和 视觉视口。视觉视口是当前显示在屏幕上的页面部分。布局视口是在桌面浏览器上呈现的完整页面的同义词（包含在当前视口上不可见的所有元素）。

在移动浏览器上，pageX 和 pageY 仍以 CSS 像素为单位相对于页面，因此您可以获得相对于文档页面的鼠标坐标。另一方面，clientX 和clientY 定义相对于视觉视口 的鼠标坐标。

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

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

【讨论】：

offsetX/Y 呢？

【解决方案4】：

我不喜欢和理解可以通过文字直观地解释的事物。

【讨论】：

答案有图：/

【解决方案5】：

对我有帮助的是直接向此页面添加一个事件并为自己点击！在开发人员工具/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 anywhere

使用这个 sn-p，您可以在滚动、移动浏览器窗口等时跟踪您的点击位置。

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

【讨论】：

【解决方案6】：

它们之间的区别在很大程度上取决于您当前所指的浏览器。每个人都以不同的方式实现这些属性，或者根本不实现。 Quirksmode 有关于浏览器与 W3C 标准（如 DOM 和 JavaScript 事件）的差异的大量文档。

【讨论】：

你的回答很好，但很快就会过时quirksmode.org/mobile/tableViewport_desktop.html

【解决方案7】：

clientX/Y 指的是相对屏幕坐标，例如，如果您的网页足够长，那么 clientX/Y 会根据实际像素位置给出点击点的坐标位置，而 ScreenX/Y 会给出参考起点的坐标页面。

【讨论】：