e.pageX和e.originalEvent.x的区别?

在获取鼠标的坐标 使用e.pageX和e.originalEvent.x 都能获取到 这两个区别是后者将滚动条计算进去了?而e.pageX只有在ff中才把滚动条计算进去了?
当然 e.originalEvent.x 也有兼容性的问题....

阅读 20.7k
评论
    1 个回答
    • 3.2k

    根据出现的“originalEvent”一词可猜测题主的本意是比较jquery下e.pageX和e.originalEvent.x的区别(因为originalEvent是jq在对构造一个jq版e对象后引用的原始e对象)。

    根据jq源码,jq版e对象下的pageX和原生的pageX是一致的,但是增加了对旧版本IE的实现部分。

    于是题目可蜕化为原生e.pageX与e.x的区别,以及jq为IE8-浏览器实现的e.pageX与原生e.x的区别。考虑jq的跨平台特性,我们在不清楚具体情况的时候,直接通过其补丁的实现方式来猜测属性的定义。

    根据jq对无原生pageX的浏览器的补丁实现

    event.pageX = original.clientX + ( doc && doc.scrollLeft || body && body.scrollLeft || 0 ) - ( doc && doc.clientLeft || body && body.clientLeft || 0 );
    

    到这里我们已经基本清楚pageX的涵义,是包含了滚动条的计算的。

    实际上,e.pageX在各(支持的)浏览器下的表现都是一致的,都是表达点击位置相对于整个文档的位置,用题主的话说就是“计算了滚动条”。
    兼容性来说,e.pageX除了在IE系列中低于IE9的版本中是不支持的,IE9+和其它主流浏览器全部一致支持。

    可是e.x的情况很复杂……
    首先,fx不支持e.x。这没啥好说的。

    其次,除IE外的其它主流浏览器,opera、chrome(以及其它同内核的浏览器),都支持e.x属性,其值为“相对可视区域的坐标”——没错,对它们来说,e.x == e.clientX。用题主的话说就是“没有计算滚动条”。

    再来看看e.x属性的发明者IE。IE全系列支持e.x,但其涵义坑爹的很……
    被点击对象所在的坐标系(即最近一个指定position: relative的tag的左上角的border外边界为原点)的坐标位置。
    如果自身及上层均没有指定position: relative属性,则蜕变为相对于“相对可视区域的坐标”。

    题外话,通过F12发现,IE一旦涉及滚动条后计算居然不是整像素数,而是会出现误差小数的!在此进行强烈吐槽。

    说实话在遇到这个问题之前我也不了解情况,特别是IE那坑爹的实现。我本来想抄网上找到的资料,但手一抖自己在浏览器上试了下才发现情况不妙,有些情况是百度不到的……

    所以自行测试代码板载!

    附测试用例,测试时请点击并在console中查看个属性值。各种点击各种花眼好累……

    <!DOCTYPE html>
    <html>
    <head>
        <title></title>
        <style type="text/css">
            *{ margin: 0; padding: 0;}
            #view{ position: relative; left: 25px; top:25px; width: 400px; height: 100px; border: 100px solid #adff2f; background: yellow;}
            #view_2{ position: absolute; left: 75px; top:375px; width: 300px; height: 100px; background: lightgreen;}
            #view_3{ position: absolute; left: 75px; top:375px; width: 300px; height: 100px; background: lightblue; }
            #view_4{ position: relative; background: lightpink;}
            #view_5{ position: relative; background: lightcyan;}
        </style>
    </head>
    <body>
    <div id="fake" style=" position: absolute; left: 10px; top:10px; width: 3000px; height: 2000px; background: #d3d3d3; padding: 50px;">
    <div id="view"><span>3<span>2<span>1</span></span></span><div id="view_2"><span>3<span>2<span>1</span></span></span></div></div>
    <div id="view_3"><span>3<span>2<span>1</span></span></span><div id="view_4"><span>3<span>2<span>1</span></span></span></div></div>
    </div>
    <div id="view_5"><span>3<span>2<span>1</span></span></span></div>
    <script type="text/javascript">
        document.onclick = function(e){
            e = e || window.event;
            console.log('e.pageX:',e.pageX);
            console.log('e.layerX:',e.layerX);
            console.log('e.offsetX:',e.offsetX);
            console.log('e.clientX:',e.clientX);
            console.log('e.x:',e.x);
        }
    </script>
    </body>
    </html>
    

    最后厚道地附上我学习了很多知识的相关链接:http://www.cnblogs.com/xesam/archive/2011/12/08/2280509.html
    以上用例就是以该链接中的用例为原本增补修改的。

      相似问题
      推荐文章