offsetX,offsetY

offset意为偏移量，是被点击的元素距左上角为参考原点的长度，而IE、FF和Chrome的参考点有所差异。

Chrome下，offsetX offsetY是包含边框的，如图所示。

而IE、FF是不包含边框的，如果鼠标进入到border区域，为返回负值，如图所示。

clientX，clientY

设置或获取鼠标指针位置相对于浏览器视口（内容区域的左上角）的坐标，与浏览器是否有滚动条无关

screenX，screenY

鼠标指针位置相对于设备屏幕的左上角的坐标，如果在chrome

pageX，pageY

相对于浏览器中完全呈现的内容区域的左上角，此参考点位于左上方的网址栏和后退按钮下方。如果在页面中嵌入可嵌入的可滚动页面，并且用户移动滚动条，则可以实际改变位置。

• pageX与clientX的区别

也就是说，当浏览器没有滚动条的时候，pageX和clientX是一样的

以上除了screenX/Y以设备像素为单位，其他都是以css像素为单位

测试代码：

document.addEventListener('click', function(e) {  console.log(    'page: ' + e.pageX + ',' + e.pageY,    'client: ' + e.clientX + ',' + e.clientY,    'screen: ' + e.screenX + ',' + e.screenY,    'offset: ' + e.offsetX+ ',' + e.offsetY)}, false);

参考文章：