javascript - e.pageX和e.originalEvent.x的区别？
在获取鼠标的坐标 使用e.pageX和e.originalEvent.x 都能获取到 这两个区别是后者将滚动条计算进去了?而e.pageX只有在ff中才把滚动条计算进去了?
当然 e.originalEvent.x 也有兼容性的问题....
在获取鼠标的坐标 使用e.pageX和e.originalEvent.x 都能获取到 这两个区别是后者将滚动条计算进去了?而e.pageX只有在ff中才把滚动条计算进去了?
当然 e.originalEvent.x 也有兼容性的问题....
数据分析师2017-10-01 01:20:26
javascript - e.pageX和e.originalEvent.x的差別？ -PHP中文網問答-javascript - e.pageX和e.originalEvent.x的差別？ -PHP中文網問答
圍觀一下哦，學習一下。
大家讲道理2017-04-10 13:13:04
根据出现的“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
以上用例就是以该链接中的用例为原本增补修改的。