在与鼠标相关的事件中事件对象 e 的一些属性代表：

  • clientX/Y
    • 鼠标位置相对于当前可视区域的坐标（不包括滚动条的距离）
  • layerX/Y
    • 同 pageX/Y 相同
    • IE11 以下同 clientX/Y
  • screenX/Y
    • 鼠标位置相对于屏幕的坐标
  • x/y
    • 同 clientX/Y 相当
    • FireFox 不支持
  • pageX/Y
    • 鼠标位置相对于当前文档的坐标（包含滚动条的距离）
    • IE9 以下不支持
  • offsetX/Y
    • 鼠标位置相对于块元素的坐标（包含边框）
    • Safari 不包括边框

对于上面复杂的关系，对鼠标坐标进行封装

pageX/Y 兼容方法

解决 < IE9 不支持

  1. function pagePos(e){
  2.     var sLeft = getScrollOffset().left,
  3.         sTop = getScrollOffset().top,
  4.         cLeft = document.documentElement.clientLeft || 0, //左边框宽
  5.         cTop = document.documentElement.clientTop || 0; //上边框宽
  7.     return {
  8.         X: e.clientX + sLeft - cLeft,
  9.         Y: e.clientY + sTop - cTop,
  10.     }    
  11. }