在编写JavaScript代码时，经常会需要获得鼠标或者某个盒子的相对坐标，这里我们就简要介绍一下几种获取方法的不同。
关于鼠标坐标
鼠标坐标一般是用event事件获取，其中有以下几个方法：
- pageX , pageY
- *screenX , *screenY
- *clientX , *clientY
其中以pageX , pageY方法使用得较多，其他的方法则不太常使用（*标明）。
一张图说明三者的区别：
如图☝
pageX是指光标相对于该网页的水平位置（网页实际大小），以当前文档的左上角为基准点。
screenX是指光标相对于该屏幕的水平位置（电脑屏幕），当前屏幕的左上角为基准点。
clientX是指光标相对于浏览器的水平位置 （当前可见区域），当前窗口的左上角为基准点。
所以我们如何获取鼠标坐标？根据自己的需求来调用这些方法就行了~
...
var x = event.pageX;
var y = event.pageY;
...
兼容性
说到兼容性，有两点要注意的是：
- pageX , pageY 在ie 6、7中不支持。
- 普通浏览器支持 event（任意参数）
ie 678 支持 window.event（内置，无参）
第一点这里我就不说了，有兴趣的可以自己研究一下。
主要谈一下第二点：
要想在ie和其他浏览器中都支持event事件，就要使用兼容性写法。
代码如下：
document.onclick() = function (event) {
event = event || window.event;
}
关于盒子坐标
这里介绍两种常用的获取盒子坐标的方法：
- offsetLeft
- style.left
看起来它们都是获取当前盒子的 left 值，但是却有很大不同：
- offsetLeft 可以返回没有定位盒子的距离左侧的位置，而 style.left 不可以。
- offsetTop 返回的是数字，而 style.top 返回的是字符串，除了数字外还带有单位：px。
- offsetTop 只读，而 style.top 可读写。（只读是获取值，可写是赋值）
- 如果没有给 HTML 元素指定过 top 样式，则style.top 返回的是空字符串。
- 对于 offsetLeft ，是从父盒子的padding 开始算，border不算，父亲没有定位则以body为准。
案例
关于这些应用的案例，可以参考我的另外一篇文章 放大器实现，有对这些方法的部分运用。
