clientX,offsetX,layerX,pageX,screenX,X有時容易記混，通過測試當前的主流瀏覽器疏理了自己的一些看法以供參考。
Chrome下（測試版本為51.0.2704.106 ）：
由上圖可見題目中的6種屬性可分為三大類：
1.鼠標指針相對於屏幕的坐標：screenX/Y
2.相對於頁面且不考慮滾動條是否滾動：clientX/Y,X/Y
3.相對於頁面且考慮滾動條：pageX/Y,layerX/Y,offsetX/Y
下面着重討論2,3。
紅色對應上文的2類。div3設置了50px的border，可以看到offsetX的數值未包含左邊框的50px。下面看一個行內塊的：
可見offsetX/Y為鼠標指針相對於當前元素（塊級或行內塊）且不包含邊框的坐標，行內元素則無效（返回父級的坐標）。（51版本的chrome下）
其他瀏覽器的情況怎么樣呢？
火狐下（測試版本為47.0.1）：
47版本的火狐不支持x/y，其他表現與51版本的chrome相同。
Safari（測試版本為5.1.7）下：
Safari(5.1.7)下offsetX/Y為鼠標指針相對於當前元素（塊級或行內塊）且包含邊框的坐標。
IE11：
IE11下layerX/Y未包括滾動條距離；pageX/Y與clientX/Y精確到了小數。offsetY出現小數大概是因為dddd的line-height設置為45px。
另：Opera(版本38.0.2220.41)表現與chrome一致。
下面是w3c關於各屬性的解釋：
pageX/Y被划到了jq里：
沒找到layerX/Y的官方文檔。
總結：
推薦使用：
screenX/Y：鼠標位置相對於屏幕的坐標
pageX/Y：相對於文檔邊緣（包含滾動條距離）
clientX/Y：相對於當前頁面且不包含滾動條距離
offsetX/Y：相對於當前元素（塊或行內塊），除safari外不包含邊框。
其他：
X/Y：與clientX/Y相同，firefox不支持
layerX/Y：除IE外與pageX/Y相同，IE11下與clientX/Y相同。非官方屬性。
測試代碼：
<!DOCTYPE html>
<html>
<head>
<title></title>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<style>
body {
margin: 0;
padding: 0;
}
.div {
text-align: center;
font-size: 24px;
height: 300px;
width: 1300px;
line-height: 300px;
color: yellow;
}
#d1 {
background-color: #FF3B2F;
}
#d2 {
background-color: #4CDA64;
}
#d3 {
background-color: #007AFF;
border: 50px solid #004400;
width: 500px;
display: inline-block;
}
#d3-2{
background-color: #FF2C55;
width: 500px;
border: 10px solid #019EE4;
display: inline-block;
}
#d4 {
position: absolute;
background-color: #FFCC00;
height: 340px;
width: 120px;
top: 0;
bottom: 0;
left: 50px;
margin: auto 0;
font-family: "arial";
font-size: 16px;
}
</style>
<script type="text/javascript">
$(function () {
document.onmousemove = function (e) {
if (e == null) {
e = window.event;
}
var html = "<span style='color:#000'>screenX:" + e.screenX + "</span><br/>";
html += "<span style='color:#000'>screenY:" + e.screenY + "</span><br/><br/>";
html += "<span style='color:#f00'>clientX:" + e.clientX + "</span><br/>";
html += "<span style='color:#f00'>clientY:" + e.clientY + "</span><br/><br/>";
html += "<span style='color:#f00'>x:" + e.x + "</span><br/>";
html += "<span style='color:#f00'>y:" + e.y + "</span><br/><br/>";
html += "<span style='color:#00f'>layerX:" + e.layerX + "</span><br/>";
html += "<span style='color:#00f'>layerY:" + e.layerY + "</span><br/><br/>";
html += "<span style='color:#00f'>pageX:" + e.pageX + "</span><br/>";
html += "<span style='color:#00f'>pageY:" + e.pageY + "</span><br/><br/>";
html += "<span style='color:#070'>offsetX:" + e.offsetX + "</span><br/>";
html += "<span style='color:#070'>offsetY:" + e.offsetY + "</span><br/>";
$("#d4").html(html);
};
});
</script>
</head>
<body>
<div id="d1" class="div">div1 height:300px width:1300px</div>
<div id="d2" class="div">div2 height:300px width:1300px</div>
<div id="d3" class="div">div3 height:300px width:500px</div>
<div id="d3-2" class="div">div3-2 height:300px width:500px <span style="width:50px;height:50px;background:#000;display: inline-block;border: 5px solid #fff;line-height: 45px;">dddd</span></div>
<div id="d4"></div>
</body>
</html>
五年前的兼容情況：各瀏覽器的鼠標位置測試