offsetX,offsetY
offset意为偏移量，是被点击的元素距左上角为参考原点的长度，而IE、FF和Chrome的参考点有所差异。
Chrome下，offsetX offsetY是包含边框的，如图所示。
而IE、FF是不包含边框的，如果鼠标进入到border区域，为返回负值，如图所示。
clientX，clientY
设置或获取鼠标指针位置相对于浏览器视口（内容区域的左上角）的坐标，与浏览器是否有滚动条无关
相对于页面的可见部分的左上角，通过浏览器窗口“看到”。
screenX，screenY
鼠标指针位置相对于设备屏幕的左上角的坐标，如果在chrome
devtool以手机模式查看页面，获取的还是相对于整个电脑屏幕的左上角的坐标
pageX，pageY
相对于浏览器中完全呈现的内容区域的左上角，此参考点位于左上方的网址栏和后退按钮下方。如果在页面中嵌入可嵌入的可滚动页面，并且用户移动滚动条，则可以实际改变位置。
坐标相对于整个渲染页面的左上角（包括滚动隐藏的部分）
- pageX与clientX的区别
也就是说，当浏览器没有滚动条的时候，pageX和clientX是一样的
以上除了screenX/Y以设备像素为单位，其他都是以css像素为单位
测试代码：
<pre style="overflow: auto; font-family: "Input Mono", "PT Mono", Consolas, Monaco, Menlo, monospace; font-size: 14px; margin: 0px; padding: 10px; color: rgb(204, 204, 204); background: rgb(45, 45, 45); line-height: 1.6; border-radius: 3px; border: none; width: 380.661px;">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);
</pre>
参考文章：
1.screenX / Y，clientX / Y和pageX / Y之间有什么区别? | icessun's Blog
2.区分event对象中的[clientX,offsetX,screenX,pageX] - 简书
