JavaScript获取鼠标坐标

在实际开发 ,我们有时候需要获取鼠标的坐标进行一些操作，以下总结了几个常用的事件属性：

screenX/screenY:事件发生时鼠标指针相对于屏幕的坐标。

clientX/screenY:事件发生时鼠标指针相对于显示区域的坐标。(坐标以当前的显示区域为依据,不受滚动条的影响)

pageX/pageY: 事件发生时，鼠标相对于整个页面的坐标 (IE不支持)。

function mousePos(event){
var e = event || window.event;
if(e.pageX || e.pageY){
return {
x:e.pageX,
y:e.pageY
};
}
return {
x:e.clientX + document.documentElement.scrollLeft - document.documentElement.clientLeft,
y:e.clientY + document.documentElement.scrollTop  - document.documentElement.clientTop
};
}

凡是文档类型声明为 XHTML(例如 transitional / strict 等) 时，需要将document.body改为document.documentElement
firefox 和其他浏览器用 event.pageX 和 event.pageY 来表示鼠标相对于文档的位置，
如果你有一个 800*600 的窗口，假如 pageX 和 pageY 的值都是300，如果你向下滚动 200， 那么 pageY 将变成 500。
在IE中，通过一些方法也可以实现相同的功能。
event.clientX 和 event.clientY 表示鼠标相当于窗口的位置，而不是文档。在同样的例子中，如果你向下滚动 200，
clientY 依然是 300，因此，我们需要添加 scrollLeft 和 scrollTop 这两个相对于文档的属性。
在某些IE 版本中文档并不是从 （0，0） 开始，而是通常有一个小的边框，
因此需要减去 document.documentElement.clientLeft 或者 document.documentElement.clientTop。