目录
定义：
代码求证
结论：
定义：
e.page:返回鼠标相对于文档页面的左上角的坐标（滚轮滑动时改变）
page的大小=页面滚动部分大小+距离窗口可视区距离的大小(距离整个文档左上角距离的大小)
e.client:返回鼠标相对于浏览器窗口可视区的坐标（滚轮滑动不变）
client的大小=距离窗口可视区的大小
代码求证
注意点：上下滑动要比较pageY和clientY，比较pageX和clientX没有意义
页面中有一个50*50大小 绝对定位 的盒子，如下图所示
当点击页面中某个位置的时候，输出当前鼠标点击位置的 e.clientX值 和 e.pageX值，代码如下所示
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>* {margin: 0;padding: 0;}.box {position: absolute;top: 500px;left: 500px;width: 50px;height: 50px;background-color: skyblue;}.nav {width: 3000px;height: 3000px;}</style>
</head><body><div class="box"></div><div class="nav"></div><script>document.addEventListener('click', function(e) {console.log('clientY: ' + e.clientY);console.log('pageY: ' + e.pageY);})</script>
</body></html>1、当点击如下所示小黄点，clientY：521px,pageY:521px
2、滑动滚轮，鼠标位置保持在屏幕原来位置上，再次点击小黄点的位置。
clientY:524px , pageY:968px
可以看出clientY的值是没有变化的，pageY的值进行了变化
因为pageY的大小不仅是窗口可视区距离目标位置的大小，还要加上滚动的距离
结论：
当滚动条没有滚动时，鼠标点击client和page 的大小是相等的，
当滚动条滚动时，鼠标点击page的大小会变化=距离文档左上角距离的大小，
client始终是距离窗口可视区距离的大小