本文實例講述了js獲取鼠標(biāo)位置的方法。分享給大家供大家參考，具體如下：

用 javascript 獲取當(dāng)前頁面上鼠標(biāo)（光標(biāo)）位置在許多情況下都會用到，比如拖放，懸停提示（tooltip） 等等。當(dāng)然，這里我們依然要面對瀏覽器的兼容問題，在不同的瀏覽器下，對這些相關(guān)的屬性處理方式也不同，這里詳細(xì)介紹了瀏覽器在處理這些屬性時的差異和最終的解決方法。

Javascript代碼如下:

<script type="text/javascript">// 說明：獲取鼠標(biāo)位置// 整理：http://www.codebit.cn// 來源：http://www.webreference.comfunction mousePosition(ev){if(ev.pageX || ev.pageY){return {x:ev.pageX, y:ev.pageY};}return {x:ev.clientX + document.body.scrollLeft - document.body.clientLeft,y:ev.clientY + document.body.scrollTop - document.body.clientTop};}</script>

使用方式：

document.onmousemove = mouseMove;function mouseMove(ev){ ev = ev || window.event; var mousePos = mousePosition(ev);}

關(guān)于代碼的詳細(xì)說明如下：

我們首先要聲明一個 evnet 對象，無論移動、點(diǎn)擊、按鍵等，都會激活一個 evnet ，在 Internet Explorer 里， event 是全局變量，會被存儲在 window.event 里． 在 firefox 或者其他瀏覽器，event 會被相應(yīng)的函數(shù)獲取．當(dāng)我們將mouseMove函數(shù)賦值于document.onmousemove，mouseMove 會獲取鼠標(biāo)移動事件。

為了讓 ev 在所有瀏覽器下獲取了 event 事件，在Firefox下"||window.event"將不起作用，因為ev已經(jīng)有了賦值。在 MSIE 中 ev 為空，所以得到 window.event 。

因為在這篇文章中我們需要多次獲取鼠標(biāo)位置，所以我們設(shè)計了一個 mousePosition 函數(shù)，它包含一個參數(shù) ： event 。

因為我們要在 MSIE 和其他瀏覽器下運(yùn)行，F(xiàn)irefox 和其他瀏覽器用 event.pageX 和 event.pageY 來表示鼠標(biāo)相對于文檔的位置，如果你有一個 500*500 的窗口并且你的鼠標(biāo)在絕對中間，那么 pageX 和 pageY 的值都是 250，如果你向下滾動 500， 那么 pageY 將變成 750。

MSIE 正好相反，它使用 event.clientX 和 event.clientY 表示鼠標(biāo)相當(dāng)于窗口的位置，而不是文檔。在同樣的例子中，如果你向下滾動500，clientY 依然是 250，因此，我們需要添加 scrollLeft 和 scrollTop 這兩個相對于文檔的屬性。最后，MSIE 中文檔并不是從 0，0 開始，而是通常有一個小的邊框（通常是 2 象素），邊框的大小定義在 document.body.clientLeft 和 clientTop 中，我們也把這些加進(jìn)去。

完成代碼：

<script type="text/javascript">// 說明：獲取鼠標(biāo)位置// 整理：http://www.codebit.cn// 來源：http://www.webreference.comfunction mousePosition(ev){   if(ev.pageX || ev.pageY){     return {x:ev.pageX, y:ev.pageY};   }   return {     x:ev.clientX + document.body.scrollLeft - document.body.clientLeft,     y:ev.clientY + document.body.scrollTop - document.body.clientTop   };}document.onmousemove = mouseMove;function mouseMove(ev){ ev = ev || window.event; var mousePos = mousePosition(ev);   document.getElementByIdx('mouseXPosition').value = mousePos.x;   document.getElementByIdx('mouseYPosition').value = mousePos.y;}</script>

希望本文所述對大家JavaScript程序設(shè)計有所幫助。