在获取鼠标的坐标 使用e.pageX和e.originalEvent.x 都能获取到 这两个区别是后者将滚动条计算进去了?而e.pageX只有在ff中才把滚动条计算进去了? 当然 e.originalEvent.x 也有兼容性的问题....
学习是最好的投资！
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.
根据出现的“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 == 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 以上用例就是以该链接中的用例为原本增补修改的。
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
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.
根据出现的“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的浏览器的补丁实现
到这里我们已经基本清楚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中查看个属性值。各种点击各种花眼好累……
最后厚道地附上我学习了很多知识的相关链接：http://www.cnblogs.com/xesam/archive/2011/12/08/2280509.html
以上用例就是以该链接中的用例为原本增补修改的。