浅谈JS中的坐标获取

字数 619阅读 635

在编写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为准。
案例

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

推荐阅读更多精彩内容