JavaScript中取得滑鼠位置相關屬性總結_javascript技巧

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組！

而且他們的差別並不明顯，各瀏覽器間還不相容！

這篇文章的目的就是搞清楚他們的差別，以及選出那些不建議使用的。

測試程式碼

直接執行下列程式碼：

複製程式碼 程式碼如下:

http://www.w3.org/1999/xhtml">
/>

顯示結果

屏內div

很高很寬。 。 。

屏外DIV

<script><br /> var jg = document.getElementById('jg');<br /> document.onmousemove = function  (e) {<br />  e = e || window.event;<br />  jg.innerHTML = 'layerX:' e.layerX <br />      ',layerY:' e.layerY <br />      ', <br/>clientX:' e.clientX <br />      ',clientY:' e.clientY <br />      ', <br/>pageX:' e.pageX <br />      ',pageY :' e.pageY <br />      ',<br/>offsetX:' e.offsetX <br />      ',offsetY:' e.offsetY <br />      ',<br/>screenX:' e.screenX <br />      ',screenY:' e.screenY <br />      ',<br/>x:' e.x <br />      ',y:' e.y;<br /> }<br /> </script>

測試過程中發現一個神器：chrome(Google瀏覽器)和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可以去掉一個了。