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。