screenX / Y，clientX / Y和pageX / Y有什么区别？
Answers:
在JavaScript中：
pageX，pageY，screenX，screenY，clientX，和clientY返回一个数，其指示物理“CSS像素”的数量的点是从参考点。事件点是用户单击的位置，参考点是左上角的点。这些属性返回到该参考点的水平和垂直距离。
pageX和pageY：
相对于浏览器中完整呈现的内容区域的左上角。该参考点在URL栏下方，并且在左上方是“后退”按钮。该点可能在浏览器窗口中的任何位置，并且如果页面中嵌入了嵌入式可滚动页面并且用户移动了滚动条，则实际上可以更改位置。
screenX和screenY：
相对于物理屏幕/监视器的左上角，仅当您增加或减少监视器的数量或监视器分辨率时，此参考点才会移动。
clientX和clientY：
相对于浏览器窗口内容区域（视口）的左上边缘。即使用户从浏览器内部移动滚动条，此点也不会移动。
有关哪些浏览器支持哪些属性的视觉效果：
http://www.quirksmode.org/dom/w3c_cssom.html#t03
w3schools拥有一个在线Java解释器和编辑器，因此您可以看到各自的功能
http://www.w3schools.com/jsref/tryit.asp?filename=try_dom_event_clientxy
<!DOCTYPE html>
<html>
<head>
<script>
function show_coords(event)
{
var x=event.clientX;
var y=event.clientY;
alert("X coords: " + x + ", Y coords: " + y);
}
</script>
</head>
<body>
<p onmousedown="show_coords(event)">Click this paragraph,
and an alert box will alert the x and y coordinates
of the mouse pointer.</p>
</body>
</html>这是一张解释之间的差异pageY和clientY。
pageX和和clientX分别相同。
pageX/Y 坐标相对于整个渲染页面的左上角（包括通过滚动隐藏的部分），
而clientX/Y坐标是相对于页面可见部分（通过浏览器窗口“可见”）的左上角。
观看演示
您可能永远都不需要 screenX/Y
screenX/Y？
pageX/pageY应该使用它而不是clientX/clientY？
- 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是相同的！
两者之间的差异将在很大程度上取决于您当前所指的浏览器。每个属性都以不同的方式或根本没有实现这些属性。Quirksmode提供了很多有关W3C标准（如DOM和JavaScript事件）的浏览器差异的文档。