浅谈JS中的坐标获取

在编写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 值，但是却有很大不同：

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

案例

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