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

关于鼠标坐标

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

  • pageX , pageY
  • *screenX , *screenY
  • *clientX , *clientY

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

一张图说明三者的区别:

如图☝

  • pageX 是指光标相对于该网页的水平位置(网页实际大小),以当前文档的左上角为基准点。
  • screenX 是指光标相对于该屏幕的水平位置(电脑屏幕),当前屏幕的左上角为基准点。
  • clientX 是指光标相对于浏览器的水平位置 (当前可见区域),当前窗口的左上角为基准点。

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

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

兼容性

说到兼容性,有两点要注意的是:

  • 普通浏览器支持 event (任意参数)

ie 678 支持 window.event (内置,无参)

  • pageX , pageY 在ie 6、7、8中不支持。

关于第一点,要想在ie和其他浏览器中都支持 event 事件,就要使用兼容性写法。代码如下:

document.onclick() = function (event) {
    event = event || window.event;
}

关于第二点,ie 6、7、8中不支持 pageX ,那么可以用以下方法代替 pageX 获取鼠标坐标

首先要获得 scrollLeft

  • 有DTD时
    使用 document.documentElement.scrollLeft 获取
  • 无DTD时
    使用 document.body.scrollLeft 获取
  • Safari 
    Safari比较特别,有自己获取scrollLeft的属性: window.pageXOffset

其中DTD是文档类型声明,用 !DOCTYPE 在文件中进行声明,对于html文件一般位于文件首部,用于声明该文档是html文档,如下:

<!DOCTYPE html>
<html>
<!- ->
</html>

因此scrollLeft 兼容性写法如下,然后将页面卷曲的距离和鼠标距离浏览器的距离相加即可:

var scrollLeft = document.documentElement.scrollLeft || window.pageXOffset || document.body.scrollLeft;
var pageX = scrollLeft + event.clientX;

总的兼容性写法:

document.onclick = function(event) {
  var event = event || window.event;
  var scrollLeft = document.documentElement.scrollLeft || window.pageXOffset || document.body.scrollLeft;
  var scrollTop = document.documentElement.scrollTop || window.pageYOffset || document.body.scrollTop;
  var pageX = event.pageX || scrollLeft + event.clientX;
  var pageY = event.pageY || screenTop + event.clientY;
}

关于盒子坐标

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

  • 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 为准