screenXY：screenX和screenY的参照点是用户屏幕左上角，screenX是鼠标位置相对于用户屏幕（左侧）水平偏移量，而screenY则是鼠标相对于屏幕（顶部）垂直方向的偏移量。
解释：就是根据距离显示器的位置来定位，与浏览器无关。
clientXY：clientX和clientY的参照点是浏览器内容区域的左上角，clientX是相对于用户浏览器（左侧）的水平偏移量，而clientY则是相对于浏览器内容区（顶部）垂直放心的偏移量。
解释：根据浏览器的窗口来定位，与page容易混淆，稍后对比解释。
pageXY：pageX和pageY的参照点是这个页面的左上角，和浏览器宽高、滚动条等无关，pageX是相对于整个页面（左侧）水平偏移量，而pageY则是相对于整个页面（顶部）垂直放心的偏移量。
解释：同样是根据浏览器窗口来定位。
client 与 page 对比：
client 位置就是根据当前浏览器窗口来定位，无论是否有横向或纵向的滚动条。
page 位置是根据整个浏览器页面来定位。
举例说明：
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
body {
height: 2000px;
}
</style>
</head>
<body>
<script>
document.onclick = function (e) {
var e = e || window.event;
console.log("X" + e.clientX);
console.log("Y" + e.clientY);
console.log("X" + e.pageX);
console.log("Y" + e.pageY);
}
</script>
</body>
</html>
没有滚动条时
页面高度滚动时
通过对比，我们可以很清楚的看到，当页面滚动时，client还是根据当前浏览器窗口定位，但page， 是根据距页面顶端来定位。
网友评论