关于鼠标在屏幕上面的位置

参考：http://www.cnblogs.com/xesam/archive/2011/12/08/2280509.html

测试结果如下：

 

chrome：

 

e.pageX——相对整个页面的坐标
e.layerX——相对当前坐标系的border左上角开始的坐标
e.offsetX——相对当前坐标系的border左上角开始的坐标
e.clientX——相对可视区域的坐标
e.x——相对可视区域的坐标

 

ff：

 

e.pageX——相对整个页面的坐标
e.layerX——相对当前坐标系的border左上角开始的坐标
e.offsetX——无
e.clientX——相对可视区域的坐标
e.x——无

 

opera：

 

e.pageX——相对整个页面的坐标
e.layerX——无
e.offsetX——相对当前坐标系的内容区域左上角开始的坐标
e.clientX——相对可视区域的坐标
e.x——相对可视区域的坐标

 

safari：（这个和chrome是一样的）

 

e.pageX——相对整个页面的坐标
e.layerX——相对当前坐标系的border左上角开始的坐标
e.offsetX——相对当前坐标系的border左上角开始的坐标
e.clientX——相对可视区域的坐标
e.x——相对可视区域的坐标

 

 

 

IE9：

 

e.pageX——相对整个页面的坐标
e.layerX——相对当前坐标系的border左上角开始的坐标 + 滚动条滚过的距离（这个NB轰轰了····=。=）
e.offsetX——相对当前坐标系的内容区域左上角开始的坐标
e.clientX——相对可视区域的坐标
e.x——相对当前坐标系的border左上角开始

 

IE8：

 

e.pageX——无
e.layerX——无
e.offsetX——相对当前坐标系的内容区域左上角开始的坐标
e.clientX——相对可视区域的坐标
e.x——相对当前坐标系的border左上角开始

 

IE7：

 

e.pageX——无
e.layerX——无
e.offsetX——相对当前坐标系的内容区域左上角开始的坐标
e.clientX——相对可视区域的坐标
e.x——相对当前坐标系的border左上角开始

 

IE6：

 

e.pageX——无
e.layerX——无
e.offsetX——相对当前坐标系的内容区域左上角开始的坐标
e.clientX——相对可视区域的坐标
e.x——相对当前坐标系的border左上角开始

 

 

 

综合为下表：

 

插入表格不方便，鸭梨很大啊

 

 

 

其中clientX是W3C标准的一个属性，所以都挺符合的，其他的就看浏览器厂商的心情了。

 

对于非IE6/7/8来说，pageX属性都可以获取到鼠标事件发生处到整个页面左边的坐标，IE6/7/8就只能通过clientX+scrollLeft来获得相同的结果。

 

 

 

需要注意的是layerX和x这两个属性。

 

event.x本来是IE的，但是除了FF之外，其他的也都实现了这个属性，但是opera，chrome和safari和IE的实现并不一致，opera，chrome和safari的event.x返回值和event.clientX相同

 

opera没有实现layerX，IE9实现了，但是IE9又是个奇葩，layerX实现得稀奇古怪。

 

 

 

layerX与offsetX

 

除了ff，其他浏览器都实现了offsetX，opera跟随IE系列，与IE实现相同，就是从内容区域边界开始算起，就是上面图示中的B点，chrome和safari从border边界开始算起，就是上面图示中的A点。

 

 

 

除了上面的一些区别，另外一个重要区别就是各个浏览器默认的边界零点也不一致，计算的时候还需要根据浏览器不同来补充或删减。