e.pageX
e.layerX
e.offsetX
e.clientX
e.x
屬性；
FF9/Chrome15/opera11.52/safari5(win)/IE6/7/8/9
測試代碼：
|
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
<link rel="stylesheet" href="http://www.cnblogs.com/../js_tool/css/debug.css">
<style type="text/css">
*{ margin: 0; padding: 0;}
#view{ position: relative; left: 25px; top:25px; width: 400px; height: 100px; border: 100px solid #adff2f; background: #ff8c00;}
#view_2{ position: absolute; left: 75px; top:375px; width: 300px; height: 100px; background: #008b8b;}
</style>
</head>
<body>
<div id="fake" style=" position: absolute; left: 10px; top:10px; width: 3000px; height: 2000px; background: #d3d3d3; padding: 50px;">
<div id="view"></div>
<div id="view_2"></div>
</div>
<script type="text/javascript" src="http://www.cnblogs.com/../common_js/Xe.js"></script>
<script type="text/javascript" src="http://www.cnblogs.com/../js_tool/js/debug.js"></script>
<script type="text/javascript">
var debug = new Xe.debug('調試面板1');
debug.createPanel();
document.onclick = function(e){
e = e || window.event;
debug.log('e.pageX:',e.pageX);
debug.log('e.layerX:',e.layerX);
debug.log('e.offsetX:',e.offsetX);
debug.log('e.clientX:',e.clientX);
debug.log('e.x:',e.x);
}
</script>
</body>
</html>
|
圖示：
![]()
測試結果如下：
chrome：
e.pageX——相對整個頁面的座標
e.layerX——相對當前座標系的border左上角開始的座標
e.offsetX——相對當前座標系的border左上角開始的座標
e.clientX——相對可視區域的座標
e.x——相對可視區域的座標
ff：
e.pageX——相對整個頁面的座標
e.layerX——相對當前座標系的border左上角開始的座標
e.offsetX——無
e.clientX——相對可視區域的座標
e.x——無
opera：![]()
opera：
e.pageX——相對整個頁面的座標
e.layerX——無
e.offsetX——相對當前座標系的內容區域左上角開始的座標
e.clientX——相對可視區域的座標
e.x——相對可視區域的座標
safari：（這個和chrome是一樣的）
e.pageX——相對整個頁面的座標
e.layerX——相對當前座標系的border左上角開始的座標
e.offsetX——相對當前座標系的border左上角開始的座標
e.clientX——相對可視區域的座標
e.x——相對可視區域的座標
IE9：
e.pageX——相對整個頁面的座標
e.layerX——相對當前座標系的border左上角開始的座標 + 滾動條滾過的距離（這個NB轟轟了····=。=）
e.offsetX——相對當前座標系的內容區域左上角開始的座標
e.clientX——相對可視區域的座標
e.x——相對當前座標系的border左上角開始
IE8：
e.pageX——無
e.layerX——無
e.offsetX——相對當前座標系的內容區域左上角開始的座標
e.clientX——相對可視區域的座標
e.x——相對當前座標系的border左上角開始
IE7：
e.pageX——無
e.layerX——無
e.offsetX——相對當前座標系的內容區域左上角開始的座標
e.clientX——相對可視區域的座標
e.x——相對當前座標系的border左上角開始
IE6：
e.pageX——無
e.layerX——無
e.offsetX——相對當前座標系的內容區域左上角開始的座標
e.clientX——相對可視區域的座標
e.x——相對當前座標系的border左上角開始
綜合爲下表：
其中clientX是W3C標準的一個屬性，所以都挺符合的，其他的就看瀏覽器廠商的心情了。
對於非IE6/7/8來說，pageX屬性都可以獲取到鼠標事件發生處到整個頁面左邊的座標，IE6/7/8就只能通過clientX+scrollLeft來獲得相同的結果。
需要注意的是layerX和x這兩個屬性。
event.x本來是IE的，但是除了FF之外，其他的也都實現了這個屬性，但是opera，chrome和safari和IE的實現並不一致，opera，chrome和safari的event.x返回值和event.clientX相同
opera沒有實現layerX，IE9實現了，但是IE9又是個奇葩，layerX實現得稀奇古怪。
layerX與offsetX
除了ff，其他瀏覽器都實現了offsetX，opera跟隨IE系列，與IE實現相同，就是從內容區域邊界開始算起，就是上面圖示中的B點，chrome和safari從border邊界開始算起，就是上面圖示中的A點。
除了上面的一些區別，另外一個重要區別就是各個瀏覽器默認的邊界零點也不一致，計算的時候還需要根據瀏覽器不同來補充或刪減。
