Javascript 中的client ， page ， screen

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，是根据距页面顶端来定位。

Javascript 中的client ， page ， screen

推荐阅读更多精彩内容