如何获取鼠标或者某个盒子的相对坐标，一下几种获取方法

  在编写JavaScript代码时，经常会需要获得鼠标或者某个盒子的相对坐标，这里我们就简要介绍一下几种获取方法的不同。

  关于鼠标坐标

  鼠标坐标一般是用event事件获取，其中有以下几个方法：

  其中以pageX , pageY方法使用得较多，其他的方法则不太常使用（*标明）。

  一张图说明三者的区别：

  如图☝

  pageX是指光标相对于该网页的水平位置（网页实际大小），以当前文档的左上角为基准点。

  screenX是指光标相对于该屏幕的水平位置（电脑屏幕），当前屏幕的左上角为基准点。

  clientX是指光标相对于浏览器的水平位置 （当前可见区域），当前窗口的左上角为基准点。

  所以我们如何获取鼠标坐标？根据自己的需求来调用这些方法就行了~

   ...

 var x = event.pageX;
  var y = event.pageY;
  ...

  兼容性

  说到兼容性js获取鼠标坐标，有两点要注意的是：

  第一点这里我就不说了，有兴趣的可以自己研究一下。

  主要谈一下第二点：

  要想在ie和其他浏览器中都支持event事件，就要使用兼容性写法。

  代码如下：

   document.onclick() = function (event) {

event = event || window.event;
  }

  关于盒子坐标

  这里介绍两种常用的获取盒子坐标的方法：

  看起来它们都是获取当前盒子的 left 值，但是却有很大不同：

  offsetLeft 可以返回没有定位盒子的距离左侧的位置，而 style.left 不可以。offsetTop 返回的是数字js获取鼠标坐标，而 style.top 返回的是字符串，除了数字外还带有单位：px。offsetTop 只读，而 style.top 可读写。（只读是获取值，可写是赋值）如果没有给 HTML 元素指定过 top 样式，则style.top 返回的是空字符串。对于 offsetLeft ，是从父盒子的padding 开始算，border不算，父亲没有定位则以body为准。案例

  关于这些应用的案例，可以参考我的另外一篇文章 放大器实现，有对这些方法的部分运用。