event对象的offsetX, clientX, pageX,

1、clientX/Y

绝大多数情况下我们希望获取鼠标点击位置相对于浏览器窗口的坐标，event的clientX，clientY属性分别表示鼠标点击位置相对于文档的左边距，上边距，不随页面滚动而改变。

element.onclick = function (event) {
    var e = event || window.event;
    console.log ('x':e.clientX,'y':e.clientY)
}

2、pageX/Y

很多时候当我们需要考虑页面滚动，也就是相对于文档（body元素）的坐标时怎么办呢？加上滚动的位移就可以了，举个例子，如果页面向右滚动 200px 并出现了滚动条，这部分在窗口之外，然后鼠标点击距离窗口左边 100px 的位置，pageX 所返回的值将是 300。
pageX/Y获取到的是触发点相对文档区域左上角距离，会随着页面滚动而改变。

pageX与clientX对比

e.pageX = 鼠标到可视窗口左侧距离+滚动条滚动距离(如果有滚动条) = e.clientX + e.scrollX;
clientX = 鼠标到可视窗口左侧距离
如果没有滚动条，这两者的距离是完全相同的。
IE9以前不兼容pageX/Y。
兼容写法如下：

element.onclick = function (event) {
    var e = event || window.event;
    var scrollX = document.documentElement.scrollLeft || document.body.scrollLeft;
    var scrollY = document.documentElement.scrollTop || document.body.scrollTop;
    var x = e.pageX || e.clientX + e.scrollX;
    var y = e.pageY || e.clientY + scrollY;
    console.log ( 'x': x, 'y': y );
}

3、offsetX/Y

offsetX/Y获取到是触发点相对被触发dom的左上角距离，不过左上角基准点在不同浏览器中有区别，以内容区左上角为基准点（不包括边框），如果触发点在边框上会返回负值，
如下图所示：

offsetX/Y.png

如果在canvas中滑动鼠标，判断光标是否在某个闭合路径内，光标位置需用offsetX、offsetY表示，而不是clientX、clientY，因为在绘制路径时的坐标是相对于canvas的。

canvas.onmousemove = function (e) {
    var e = event || window.event;
    if (ctx.isPointInPath(e.offsetX, e.offsetY)) {
        console.log('鼠标在当前闭合路径内‘’）
    }
}

4、layerX/Y

layerX:鼠标相对于当前坐标系的位置。
如果触发事件元素没有设置绝对定位或相对定位,以页面为参考点,如果有,则将改变参考坐标系,以触发事件元素盒子模型的border区域的左上角为参考点。
下图为border为1px的盒子，点击内容区某处显示的事件对象，layerX与offsetX相差的值为border的像素大小。

layerX/Y.png
IE浏览器的layerX/Y
兼容性：IE6/7/8不支持，opera不支持，IE9/10和Chrome、Safari均支持

5、screenX/Y

screenX/Y获取到的是触发点相对显示器屏幕左上角的距离，不随页面滚动而改变。

screenX/Y

canvas.onmousemove = function (e) {
    var e = event || window.event;
    console.log ('x':e.screenX,'y':screenY);
}

最后来一张Chrome浏览器下的图片

image.png