84669 Lernen von Personen
152542 Lernen von Personen
20005 Lernen von Personen
5487 Lernen von Personen
7821 Lernen von Personen
359900 Lernen von Personen
3350 Lernen von Personen
180660 Lernen von Personen
48569 Lernen von Personen
18603 Lernen von Personen
40936 Lernen von Personen
1549 Lernen von Personen
1183 Lernen von Personen
32909 Lernen von Personen
在获取鼠标的坐标 使用e.pageX和e.originalEvent.x 都能获取到 这两个区别是后者将滚动条计算进去了?而e.pageX只有在ff中才把滚动条计算进去了? 当然 e.originalEvent.x 也有兼容性的问题....
学习是最好的投资！
javascript - e.pageX和e.originalEvent.x的区别？-PHP中文网问答-javascript - e.pageX和e.originalEvent.x的区别？-PHP中文网问答
围观一下哦，学习一下。
根据出现的“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 以上用例就是以该链接中的用例为原本增补修改的。
javascript - e.pageX和e.originalEvent.x的区别？-PHP中文网问答-javascript - e.pageX和e.originalEvent.x的区别？-PHP中文网问答
围观一下哦，学习一下。
根据出现的“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
以上用例就是以该链接中的用例为原本增补修改的。