pageX和clientX的区别

定义：

代码求证

结论：

定义：

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