关于页面鼠标坐标的位置计算,有不少兼容浏览器的方案,但一直没有仔细看一下到底差别在哪里。这次遇到IE9定位异常,坚定了一定要看个究竟的想法。希望本文能为对坐标有疑惑的朋友抛砖引玉的作用。
对于以下属性的意义,大家可以参考 http://www.quirksmode.org/dom/w3c_cssom.html ,本文仅为验证属性差别。
浏览器\属性列表 | clientX/clientY | offsetX/offsetY | layerX/layerY | pageX/pageY | screenX/screenY | x/y |
IE678 | √ | √ | × | × | √ | √ |
Firefox | √ | × | √ | √ | √ | × |
Chrome/Safari/Maxthon | √ | √ | √ | √ | √ | √ |
Opera | √ | √ | × | √ | √ | √ |
IE9 | √ | √ | √ | √ | √ | √ |
IE10 | √ | √ | √ | √ | √ | √ |
最统一的是 screenX/screenY 属性,即相对屏幕坐标位置。
IE6/7/8
e.clientX/Y 可视区域坐标 不同的是e.x/y,在IE6/7 它与clientX/Y相同,IE8则是整体页面区域坐标(含滚动)
e.offsetX e.offsetY 不包含边框外侧
不存在 e.layerX/Y e.pageX/Y
Firefox
e.clientX/Y 可视区域坐标 e.pageX/Y 整体页面区域坐标(含滚动)
e.layerX e.layerY 包含边框外侧
不存在 e.x/y e.offsetX/Y
Chrome/Safari/Maxthon
e.clientX/Y = e.x/y 可视区域坐标 e.pageX/Y 整体页面区域坐标(含滚动)
e.offsetX/Y = e.layerX/Y 包含边框外侧
weibkit内核浏览器支持全部属性,且统一标准
Opera
e.clientX/Y = e.x/y 可视区域坐标 e.pageX/Y 整体页面区域坐标(含滚动)
e.offsetX e.offsetY 不包含边框外侧
不存在 e.layerX/Y
IE9
e.clientX/Y 可视区域坐标 e.pageX/Y= e.x/y 整体页面区域坐标(含滚动)
e.offsetX/Y 不包含边框
e.layerX/Y = e.offsetX/Y + scrollLeft/scrollTop
IE10
IE10同IE9,但IE10在计算坐标上更加精确。