screenX/Y、clientX/Y 和 pageX/Y 有什么区别? [英] What is the difference between screenX/Y, clientX/Y and pageX/Y?

问题描述

screenX/Y、clientX/Y 和 pageX 有什么区别code>/Y?

What is the difference between screenX/Y, clientX/Y and pageX/Y?

对于 iPad Safari，计算是否与在桌面上相似?还是因为视口而有所不同?

Also for iPad Safari, are the calculations similar as on desktop—OR there is some difference because of viewport?

如果你能给我举个例子就好了.

It would be great if you could point me to an example.

推荐答案

下面的图片解释了 pageY 和 clientY 之间的区别.

Here's a picture explaining the difference between pageY and clientY.

对于 pageX 和 clientX 分别相同.

Same for pageX and clientX, respectively.

pageX/Y 坐标相对于整个渲染页面的左上角(包括滚动隐藏的部分)，

pageX/Y coordinates are relative to the top left corner of the whole rendered page (including parts hidden by scrolling),

而 clientX/Y 坐标相对于页面可见部分的左上角，看到"通过浏览器窗口.

while clientX/Y coordinates are relative to the top left corner of the visible part of the page, "seen" through browser window.

或者试试这个片段:

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

这篇关于screenX/Y、clientX/Y 和 pageX/Y 有什么区别?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！