678

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

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

如果您能给我举个例子，那就太好了。

4

7 回答 7

631

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

pageY 与 clientY

pageX和clientX分别相同。

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

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

看演示

或试试这个片段：

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

于 2014-01-30T09:48:26.757 回答
543

在 JavaScript 中：

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

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

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

clientXand clientY：相对于浏览器窗口的内容区域（视口
）的 左上边缘。即使用户从浏览器中移动滚动条，该点也不会移动。

对于哪些浏览器支持哪些属性的视觉效果：

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>

于 2012-02-17T21:16:17.850 回答
127
  1. pageX/Y<html>以 CSS 像素为单位给出相对于元素的坐标。
  2. clientX/Y给出相对于viewportin CSS 像素的坐标。
  3. screenX/Y给出相对于screen设备像素的坐标。

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

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

关于视觉视口和布局视口之间的差异，这里还有另一个stackoverflow线程：视觉视口和布局视口之间的区别？

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

于 2012-07-01T08:26:08.573 回答
57

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

在此处输入图像描述

于 2020-08-27T08:23:49.343 回答
29

帮助我的是直接向这个页面添加一个事件，然后自己点击！在开发人员工具/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

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

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

于 2014-08-11T04:03:44.790 回答
6

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

于 2011-05-20T14:42:56.587 回答
0

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

于 2020-09-17T10:19:28.530 回答