javascript并没有mouse对象，获取鼠标坐标要靠强大的event对象。
我们通过监听document的mousemove，就可以实时获得鼠标位置。
但是！！event中和鼠标相关的属性太多了，很让人头大！如下：
event.layerx event.layery
event.clientx event.clienty
event.pagex event.pagey
event.offsetx event.offsety
event.screenx event.screeny
event.x event.y
共计6组！
而且他们的区别并不明显，各浏览器间还不兼容！
这篇文章的目的就是搞清楚他们的区别，以及选出那些不推荐使用的。
测试代码
直接运行下列代码：
复制代码 代码如下:
http://www.w3.org/1999/xhtml>
/>
显示结果
屏内div
很高很宽。。。
屏外div
测试过程中发现一个神器：chrome(谷歌浏览器)和ie9全兼容以上所有属性！用来比较他们就非常方便了。
经过对比，结果如下：
各属性释义
clientx与y，是鼠标相对于浏览器视口（即滚动条之外的部分忽略掉）的坐标；所有浏览器都支持。
screenx与y，是鼠标相对于整个屏幕左边（顶边）的坐标，基本与document脱节了；全兼容。
offsetx与y，是鼠标相对于当前所指向对象的坐标，鼠标此时指向按钮，则offsetx是相对于这个按钮；firefox不支持
x与y，同标准浏览器的layerx与y，是ie中可以用来代替layerx的属性
pagex与y，是鼠标相对于整个页面左边（顶边）的坐标，包括视口之外的；ie7，8不支持。
重点：layerx与layery
layerx与y是标准浏览器出的新属性，ie9也支持。他可以用来代替offsetx与y.但是，他的定义为：相对于当前指向元素最近的有定位信息的元素的坐标。这个“有定位”是指有非默认定位的css属性（即非static）。
如果，当前指向的元素就有定位，那么layerx与y就返回相对于此元素的坐标；否则，就查看此元素的父标签；还是没有定位的话，就继续；一直到根元素——html节点。
所以，在firefox中，想要offsetx值，就必须加入position定位信息！
兼容性总结：
1，firefox不支持offsetx,offsety与x,y属性，但完全可以用layerx代替他们；
2，ie中的x,y相当于firefox&chrome中的layerx与layery；
3，ie7,8的document的边界与浏览器窗口的边界有2px的距离，所以在窗口最大化时screenx最小都有2px；
4，ie9中的layerx与y，虽然有值，但却莫名其妙的不正确，貌似与html标签有关，比如我的例子的代码，把滚动条拖到最右边，鼠标从空白慢慢移动到大div上，此时大div的最右边与第一个div的最右边的差值也会算进layerx中。。。后头元素越来越多，这个计算就越复杂；而firefox与chrome的layerx则没有这个问题。所以，不要在ie9中使用layerx.
5,在chrome中，x与y虽然有值，但是是和clientx与y完全相同！ 所以，不建议使用x,y属性。
兼容性补救
标准浏览器中可以用position与event.layerx配合来实现event.offsetx属性；
ie7，8中没有pagex,pagey,只有用document.documentelement.scrollleft+event.clientx来求出。
所以，ie中的x,y或者offsetx,offsety可以去掉一个了。