页面鼠标坐标定位的思考

 

    关于页面鼠标坐标的位置计算，有不少兼容浏览器的方案，但一直没有仔细看一下到底差别在哪里。这次遇到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在计算坐标上更加精确。