clientXY，offsetXY，pageXY的区别

简单提及来，就是：
offsetXY:是该事件发生的盒子模型里的坐标，与滚动条无关。
clientXY：是整个浏览器可用部分里的坐标，与滚动条无关。
pageXY：是整个网页里的坐标，与滚动条有关。

下面来个简单的例子说明一下。
页面里写了个div，背景颜色蓝色，长宽都是10px，fix在网页的右上角top20:px，right:10px的位置。网页里写了不少的br，使得垂直的滚动条能够滚动。

.fixed{
    position:fixed;
    width:10px;
    height:10px;
    background:blue;
    top:20px;
    right:10px;
}

大概效果是这样的：

而后给这个小div绑个点击事件：

function fixedClick(e){
    console.log("offsetY: " + e.offsetY);
    console.log("clientY: " + e.clientY);
    console.log("pageY: " + e.pageY);
}

作实验。首先滚动条在位置1，点击一下div，而后往下拖动滚动条到位置2，点击一下div。打开console。
结果：

offsetY: 1
clientY: 21
pageY: 1649
offsetY: 7
clientY: 27
pageY: 1974

注意两次的offsetY和clientY有点偏差，这个偏差在10px之内都是没问题的。

毫无疑问，offsetY是以这个div的盒子模型的左上角为原点的，两次点击都小于10.
clientY是以浏览器可视区域的左上角为原点的，因此它是大于20，由于咱们的div是top 20px的。
而pageY是很夸张的数字，由于这是按照整个页面长度来计算的。