clientX/clientY 与 screenX/screenY 的区别

在JavaScript当中有时候我们需要获取鼠标悬停的位置，以此来做一些特殊处理。这时候就需要用到MouseEvent对象。MouseEvent对象提供了两组属性来定位鼠标的位置：clientX/clientY和screenX/screenY。除了这两组属性我们经常还会用到pageX/pageY和offsetX/offsetY这两组属性也是用来定位鼠标的，那么他们究竟有什么异同呢。

属性说明

• clientX/clientY

  名称	说明	返回
  clientX	返回事件触发时鼠标相对于元素视口 的X坐标	数值
  clientY	返回事件触发时鼠标相对于元素视口 的Y坐标	数值

  这里的元素视口实际上代指就是浏览器，clientX是鼠标距离浏览器左边框的距离，clientY是鼠标距离浏览器上边框的距离。

• screenX/screenY

  名称	说明	返回
  screenX	返回事件触发时鼠标相对于屏幕 的X坐标	数值
  screenY	返回事件触发时鼠标相对于屏幕 的Y坐标	数值

  顾名思义，screenX是鼠标距离显示器屏幕左边框的距离，screenY是鼠标距离显示器屏幕上边框的距离。

• pageX/pageY

  名称	说明	返回
  pageX	返回事件触发时鼠标相对于文档 的X坐标	数值
  pageY	返回事件触发时鼠标相对于文档 的Y坐标	数值

  所谓文档可以简单的理解为浏览器中的页面内容，pageX是鼠标距离文档左侧的距离，pageY是鼠标距离文档上侧的距离，如果我们将鼠标悬停在浏览器中间，通过滚轮滚动浏览器，那么尽管没有移动鼠标的位置而pageY一直在变化，因为相对文档顶部的距离一直在变化。

• offsetX/offsetY

  名称	说明	返回
  pageX	返回事件触发时鼠标相对于事件指向元素 的X坐标	数值
  pageY	返回事件触发时鼠标相对于事件指向元素 的Y坐标	数值

  假设有一个元素<p>test</p>当鼠标进入元素中触发事件时这是offsetX指的就是鼠标到P元素左边的距离。