e.pageX

e.layerX

e.offsetX

e.clientX

e.x

属性；

测试浏览器：

FF9/Chrome15/opera11.52/safari5(win)/IE6/7/8/9

测试代码：

　　

图示：

测试结果如下：

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点。

 

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

 

来自小西山子【】