logo标签列表

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

javascriptipadsafarimouse-position
755
“screenX/Y”、“clientX/Y”和“pageX/Y”有什么区别？
对于iPad Safari，计算方式是否与桌面端相似，或者因为视口的原因有所不同？
如果您能给我一个示例，那就太好了。
5
这是另一个示例，使用五个不同的属性（screen、client、page、layer、offset）获取鼠标坐标。demo - akinuri
8个回答
765

这里有一张图片，解释了pageY、clientY和screenY之间的区别。

pageY vs clientY vs screenY

pageX/Y坐标是相对于整个呈现页面（包括通过滚动隐藏的部分）左上角的位置，

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

screenX/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

33
太棒了，感谢您的演示，比文字解释更加清晰易懂。 - Rahul Prasad
24
能想象一下 screenX/Y 是什么吗？ - ayjay
1
我想在页面上的特定矩形区域绑定一个点击事件，因此应该使用pageX/pageY而不是clientX/clientY？ - techie_28
1
简单的x和y怎么样？当我尝试时，它们似乎与clientX/Y相同，但我没有找到明确的参考资料。 - zhouji
1
@zhouji，你已经全部掌握了。x和y由CSSOM-View模块定义为clientX和clientY的别名。 - Masklinn
显示剩余8条评论
555

在JavaScript中：

pageX、pageY、screenX、screenY、clientX和clientY返回一个数字，该数字表示事件点距参考点的逻辑"CSS像素"数。事件点是用户单击的位置，参考点是左上角的一个点。这些属性返回事件点与参考点之间的水平和垂直距离。

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

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

clientX和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>

7
在jQuery中，offsetX和offsetY是相对于父容器的位置。 - Muhammad Umer
2
w3schools的链接似乎只能在参考部分中使用：http://www.w3schools.com/jsref/tryit.asp?filename=try_dom_event_clientxy - valid
2
我认为这是一个误导性的或者至少是无效的关于pageX/pageY的解释（以及由此引申出来的问题），因为它提到了URL栏和返回按钮，而更好的解释应该是基于页面内容的，例如视觉解释答案所述。此外，w3schools的示例并不实用，因为它只输出一个x/y对，并且其中没有滚动条可以展示差异。 - Robert Monfera
4
PageX/PageY与ClientX/ClientY的解释被交换了，你需要进行更正。这可能会产生误导，请进行更正。 - ExploreNav
1
我认为@NavpreetKaur是正确的。这个答案在clientX与pageX方面完全相反。 - zhouji
显示剩余2条评论
133
  1. pageX/Y返回相对于CSS像素中的<html>元素的坐标。
  2. clientX/Y返回相对于CSS像素中的viewport的坐标。
  3. screenX/Y返回相对于设备像素中的screen的坐标。

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

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

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

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

4
offsetX/Y是什么？ - Venryx
76

我不喜欢也不理解那些可以通过图像来解释的事情，我更喜欢用文字来表达。

在此输入图片描述

1
答案包含一张图片 :/ - Neil
这可能有点误导性，pageY实际上可能比screenY更长。当然，对于仔细观察的人来说，pageX与screenX已经正确显示了这一点。我还编辑了被接受答案的图片来说明这一点。 - aderchox
这可能有点误导，pageY实际上可能比screenY更长。当然，对于细心的人来说，pageX与screenX已经正确显示了这一点。我还编辑了被接受的答案的图片来说明这一点。 - aderchox
32
添加一个事件到该页面并自行点击！在开发者工具/ Firebug 等中打开控制台，并粘贴以下代码： 
document.addEventListener("click", function(e) {
  console.log(e.target);
});

Then click around on the page and you'll see what element is being clicked!

This is a great way to understand how events work and how to target specific elements with JavaScript. 

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是相同的！

22

全面概览，包括 offsetX/Y

其他有趣的属性包括 offsetX/Y（鼠标与被点击元素/节点边框之间的偏移量）。以下是更详细的信息：

offsetX is the horizontal offset between the mouse and the left border of the element/node that was clicked

来源

6

这取决于你正在使用的浏览器，它们之间的差异主要在于实现这些属性的方式不同，或者根本不支持。 Quirksmode 提供了关于DOM和JavaScript事件等W3C标准方面浏览器差异性的文档资料。

4
你的答案很好，但很快就会过时。可参考这个链接：http://www.quirksmode.org/mobile/tableViewport_desktop.html - Dan
0

clientX/Y指相对于屏幕的坐标。例如，如果你的网页很长，那么clientX/Y将以实际像素位置为基准给出所点击点的坐标位置，而ScreenX/Y则是相对于页面起始位置的坐标。

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接