javascript並沒有mouse對象，獲取鼠標坐標要靠強大的event對象。
我們通過監聽document的mousemove，就可以實時獲得鼠標位置。
但是！ ！ event中和鼠標相關的屬性太多了，很讓人頭大！如下：
| event.layerX | event.layerY |
| event.clientX | event.clientY |
| event.pageX | event.pageY |
| event.offsetX | event.offsetY |
| event.screenX | event.screenY |
| event.x | event.y |
共計6組！
而且他們的區別並不明顯，各瀏覽器間還不兼容！
這篇文章的目的就是搞清楚他們的區別，以及選出那些不推薦使用的。
測試代碼
直接運行下列代碼：
複製代碼代碼如下:
<!DOCTYPE html><br />
<html xmlns="http://www.w3.org/1999/xhtml"><br />
<head><br />
<meta charset="utf-8" /></p>
<style>
body {position:relative;}
div {min-height: 300px; background-color: #eee;}
#jg {right: 0; top: 10px; position: fixed; background-color: #f00;}
</style>
<p></head><br />
<body><br />
<span id="jg">顯示結果</span><br />
<input type="button" value="一個按鈕" /></p>
<div>屏內div</div>
<div style="height:1000px; width:2000px; background:#ddd;">很高很寬。 。 。 </div>
<div>屏外DIV</div>
<p></body><br />
<script>
var jg = document.getElementById('jg');
document.onmousemove = function (e) {
e = e || window.event;
jg.innerHTML = 'layerX:'+e.layerX+
',layerY:'+e.layerY+
', <br/>clientX:'+e.clientX+
',clientY:'+e.clientY+
', <br/>pageX:'+e.pageX+
',pageY :'+e.pageY+
',<br/>offsetX:'+e.offsetX+
',offsetY:'+e.offsetY+
',<br/>screenX:'+e.screenX+
',screenY:'+e.screenY+
',<br/>x:'+e.x+
',y:'+ey;
}
</script><br />
</html>
測試過程中發現一個神器：chrome(谷歌瀏覽器)和IE9全兼容以上所有屬性！用來比較他們就非常方便了。
經過對比，結果如下：
各屬性釋義
clientX與Y，是鼠標相對於瀏覽器視口（即滾動條之外的部分忽略掉）的坐標；所有瀏覽器都支持。
screenX與Y，是鼠標相對於整個屏幕左邊（頂邊）的坐標，基本與document脫節了；全兼容。
offsetX與Y，是鼠標相對於當前所指向對象的坐標，鼠標此時指向按鈕，則offsetX是相對於這個按鈕；firefox不支持
x與y，同標準瀏覽器的layerX與Y，是IE中可以用來代替layerX的屬性
pageX與Y，是鼠標相對於整個頁面左邊（頂邊）的坐標，包括視口之外的；IE7，8不支持。
重點：layerX與layerY
layerX與Y是標準瀏覽器出的新屬性，IE9也支持。他可以用來代替offsetX與Y.但是，他的定義為：相對於當前指向元素最近的有定位信息的元素的坐標。這個“有定位”是指有非默認定位的css屬性（即非static）。
如果，當前指向的元素就有定位，那麼layerX與Y就返回相對於此元素的坐標；否則，就查看此元素的父標籤；還是沒有定位的話，就繼續；一直到根元素――html節點。
所以，在firefox中，想要offsetX值，就必須加入position定位信息！
兼容性總結：
1，firefox不支持offsetX,offsetY與x,y屬性，但完全可以用layerX代替他們；
2，ie中的x,y相當於firefox&chrome中的layerX與layerY；
3，ie7,8的document的邊界與瀏覽器窗口的邊界有2px的距離，所以在窗口最大化時screenX最小都有2px；
4，ie9中的layerX與Y，雖然有值，但卻莫名其妙的不正確，貌似與html標籤有關，比如我的例子的代碼，把滾動條拖到最右邊，鼠標從空白慢慢移動到大DIV上，此時大DIV的最右邊與第一個DIV的最右邊的差值也會算進layerX中。 。 。後頭元素越來越多，這個計算就越複雜；而firefox與chrome的layerX則沒有這個問題。所以，不要在IE9中使用layerX.
5,在chrome中，x與y雖然有值，但是是和clientX與Y完全相同！ 所以，不建議使用x,y屬性。
兼容性補救
標準瀏覽器中可以用position與event.layerX配合來實現event.offsetX屬性；
IE7，8中沒有pageX,pageY,只有用document.documentElement.scrollLeft+event.clientX來求出。
所以，IE中的x,y或者offsetX,offsetY可以去掉一個了。