.jpg)
/、/ 和 / 有什么区别？screenXYclientXYpageXY
同样对于iPad Safari，计算是否与桌面相似 – 或者由于视口而存在一些差异？
如果你能给我举一个例子，那就太好了。
这是一张图片，解释了 和 和 之间的区别。pageYclientYscreenY
分别与 和 相同。pageXclientXscreenX
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
在 JavaScript 中：
pageX、、、、 和 返回一个数字，该数字指示事件点从参考点开始的逻辑“CSS 像素”数。事件点是用户单击的位置，参考点是左上角的一个点。这些属性返回事件点与该参考点的水平和垂直距离。pageYscreenXscreenYclientXclientY
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>
<html>viewportscreen关于您的最后一个问题，如果桌面和移动浏览器上的计算相似……为了更好地理解 – 在移动浏览器上 – 我们需要区分两个新概念：布局视口和视觉视口。可视视口是当前显示在屏幕上的页面部分。布局视口是在桌面浏览器上呈现的完整页面的同义词（包含当前视区上不可见的所有元素）。
在移动浏览器上，和仍然相对于页面（以CSS像素为单位），因此您可以获取相对于文档页面的鼠标坐标。另一方面，定义相对于可视视口的鼠标坐标。pageXpageYclientXclientY
关于可视视口和布局视口之间的差异，这里有另一个堆栈溢出线程：视觉视口和布局视口之间的区别？
另一个很好的资源：http://www.quirksmode.org/mobile/viewports2.html
模板简介：该模板名称为【JavaScript 中 screenX/Y、clientX/Y 和 pageX/Y 有什么区别？】，大小是暂无信息，文档格式为.编程语言，推荐使用Sublime/Dreamweaver/HBuilder打开，作品中的图片，文字等数据均可修改，图片请在作品中选中图片替换即可，文字修改直接点击文字修改即可，您也可以新增或修改作品中的内容，该模板来自用户分享，如有侵权行为请联系网站客服处理。欢迎来懒人模板【JavaScript】栏目查找您需要的精美模板。
.jpg)
.jpg)
.jpg)
.jpg)
