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

Oooooooo
  • 1.7k

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

评论
阅读 21k
1 个回答

根据出现的“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
以上用例就是以该链接中的用例为原本增补修改的。

宣传栏