屏幕X/Y、客户端X/Y和页面X/Y有什么区别？

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

同样对于iPadSafari，计算是否与台式机相似-或者由于视口而有所不同？

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

277663 次浏览
小开

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

小开

在JavaScript中：

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

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

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

#EYZ0和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>

小开
  1. x/y页给出了相对于CSS像素中<html>元素的坐标。
  2. clientX客户端以CSS像素给出相对于viewport的坐标。
  3. X屏幕以设备像素为单位给出相对于screen的坐标。

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

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

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

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

小开

这张图片解释了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

小开

帮助我的是直接将事件添加到此页面并为自己单击！在开发人员工具/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

With this snippet, you can track your click position as you scroll, move the browser window, etc.

Notice that pageX/Y and clientX/Y are the same when you're scrolled all the way to the top!

小开

我不喜欢和理解事物，这可以用视觉来解释，用语言。

在此处输入图片描述

小开

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


提交答案