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

javascript ipad safari mouse-position

2022-08-29 22:34:14

/、 / 和 / 之间有什么区别？screenXYclientXYpageXY

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

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

答案 1

下图说明了和之间的区别。pageYclientY

pageY vs clientY

分别与相同。pageXclientX

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

答案 2

在 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>