鼠标定位问题总结

鼠标事件发生时的鼠标定位问题即Mouse Position，由于标准的滞后及各个浏览器厂商的实现不同，目前没有完美的解决方案。

该问题首先受到不同浏览器的事件模型有不同的实现方式的影响：

IE浏览器中，有一个显式的window.event对象，可以随时取用。
W3C兼容浏览器中，使用隐式对象，以第一个参数event的形式传递给事件处理函数。

其次，不同浏览器中Event对象的位置相关属性也有差别:

screenX 相对于电脑屏幕的左上角，鼠标的X坐标。标准属性，都支持。
screenY 相对于电脑屏幕的左上角，鼠标的Y坐标。标准属性，都支持。

clientX 相对于当前窗口可视区域（不包括窗口边框）的左上角，鼠标的X坐标。标准属性，都支持。
clientY 相对于当前窗口可视区域（不包括窗口边框）的左上角，鼠标的Y坐标。标准属性，都支持。

x 相对于css中有position属性的最近的父元素，鼠标偏移的x轴坐标。标准草案属性，等价于clientX，IE支持
如果没有这样的父元素，默认以BODY元素（等价于pageX）。
y 相对于css中有position属性的最近的父元素，鼠标偏移的y轴坐标。标准草案属性，等价于clientY，IE支持
如果没有这样的父元素，默认以BODY元素（等价于pageY）。

pageX 相对于BODY元素的左上角，鼠标的X坐标。标准草案属性，只有非IE，IE9以后版本支持。
e.pageX = window.pageXOffset + e.clientX
pageY 相对于BODY元素的左上角，鼠标的Y坐标。标准草案属性，只有非IE，IE9以后版本支持。
e.pageY = window.pageYOffset + e.clientY

offsetX 相对于css中有position属性的最近的父元素，鼠标偏移的x轴坐标。标准草案属性，非IE支持。
offsetY 相对于css中有position属性的最近的父元素，鼠标偏移的Y轴坐标。标准草案属性，非IE支持。
offsetX 相对于发出事件的元素，鼠标偏移的x轴坐标。标准草案属性，只有IE支持。
offsetY 相对于发出事件的元素，鼠标偏移的Y轴坐标。标准草案属性，只有IE支持。

layerX 相对于css中有position属性的最近的父元素，鼠标偏移的x轴坐标。非标准属性，等价于offsetX，只有非IE支持。
layerY 相对于css中有position属性的最近的父元素，鼠标偏移的y轴坐标。非标准属性，等价于offsetY，只有非IE支持。

scrollX，滚动条滚动的水平长度。
scrollY，滚动条滚动的垂直长度。

转载于:https://www.cnblogs.com/champagne/p/4786786.html