screenX/Y，clientX/Y，offsetX/Y和pageX/Y之间有什么区别?

offsetX,offsetY

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

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

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

clientX，clientY

设置或获取鼠标指针位置相对于浏览器视口（内容区域的左上角）的坐标，与浏览器是否有滚动条无关
相对于页面的可见部分的左上角，通过浏览器窗口“看到”。

screenX，screenY

鼠标指针位置相对于设备屏幕的左上角的坐标，如果在chrome
devtool以手机模式查看页面，获取的还是相对于整个电脑屏幕的左上角的坐标

pageX，pageY

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

• pageX与clientX的区别

pageY和clientY的差异，图来自网络

也就是说，当浏览器没有滚动条的时候，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);

参考文章：
1.screenX / Y，clientX / Y和pageX / Y之间有什么区别? | icessun's Blog
2.区分event对象中的[clientX,offsetX,screenX,pageX] -