screenX/ Y、clientX/Y和pageX/之间有什么区别Y？
同样对于 iPad Safari，计算是否与在桌面上相似——或者由于视口而存在一些差异？
如果你能给我举个例子，那就太好了。
screenX/Y、clientX/Y 和 pageX/Y 有什么区别？
IT技术
javascript
ipad
safari
mouse-position
2021-01-16 14:57:10
6个回答
这是一张图片，解释了pageY和之间的区别clientY。
pageX和clientX分别相同。
pageX/Y 坐标相对于整个渲染页面的左上角（包括滚动隐藏的部分），
而clientX/Y坐标相对于页面可见部分的左上角，通过浏览器窗口“看到”。
看演示
或者试试这个片段：
注意：您可能永远不需要screenX/Y
在 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>- pageX/Y
<html>以 CSS 像素为单位给出相对于元素的坐标。 - clientX/Y给出相对于
viewportCSS 像素的坐标。 - screenX/Y给出相对于
screen设备像素的坐标。
关于您的最后一个问题，桌面和移动浏览器上的计算是否相似......为了更好地理解 - 在移动浏览器上 - 我们需要区分两个新概念：布局视口和视觉视口。视觉视口是当前显示在屏幕上的页面部分。布局视口是在桌面浏览器上呈现的完整页面的同义词（包含在当前视口上不可见的所有元素）。
在移动浏览器上，pageX和pageY仍然以 CSS 像素相对于页面，因此您可以获得相对于文档页面的鼠标坐标。另一方面clientX，clientY定义与视觉视口相关的鼠标坐标。
关于视觉视口和布局视口之间的差异，这里还有另一个 stackoverflow 线程：视觉视口和布局视口之间的区别？
另一个很好的资源：http : //www.quirksmode.org/mobile/viewports2.html
我不喜欢和理解可以通过视觉来解释的东西。
帮助我的是直接在此页面上添加一个事件并为自己单击！在开发人员工具/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 是相同的！