screenX/Y、clientX/Y和pageX/Y有啥区别？

Posted 2023-05-08

技术标签:

【中文标题】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 使用五个不同的属性（屏幕、客户端、页面、图层、偏移）来获取鼠标坐标。 【参考方案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

<html>

clientX/Y

viewport

screenX/Y

screen

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

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

关于视觉视口和布局视口之间的差异，这里还有另一个 *** 线程：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);