简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
javascript - e.pageX和e.originalEvent.x的区别？
PHPz
PHPz 2017-04-10 13:11:04
0
2
755

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

PHPz
PHPz

学习是最好的投资！

reply all(2)
数据分析师
数据分析师2017-10-01 01:20:26 2 floor

javascript - What is the difference between e.pageX and e.originalEvent.x? -PHP Chinese website Q&A-javascript - What is the difference between e.pageX and e.originalEvent.x? -PHP Chinese website Q&A

Let’s take a look and learn.

Like +0
Add Reply
大家讲道理
大家讲道理2017-04-10 13:13:04 1 floor

根据出现的“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>
<p id="fake" style=" position: absolute; left: 10px; top:10px; width: 3000px; height: 2000px; background: #d3d3d3; padding: 50px;">
<p id="view"><span>3<span>2<span>1</span></span></span><p id="view_2"><span>3<span>2<span>1</span></span></span></p></p>
<p id="view_3"><span>3<span>2<span>1</span></span></span><p id="view_4"><span>3<span>2<span>1</span></span></span></p></p>
</p>
<p id="view_5"><span>3<span>2<span>1</span></span></span></p>
<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
以上用例就是以该链接中的用例为原本增补修改的。

Like +0
Add Reply
Popular Topics
More>
Popular Articles
Popular Tutorials
More>
Related Tutorials
Popular Recommendations
Latest courses
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
About us Disclaimer Sitemap
php.cn：Public welfare online PHP training，Help PHP learners grow quickly！