js取得滑鼠位置實例詳解_javascript技巧

本文實例講述了js取得滑鼠位置的方法。分享給大家參考，具體如下：

用 javascript 取得目前頁面上滑鼠（遊標）位置在許多情況下都會用到，例如拖放，懸停提示（tooltip） 等等。當然，這裡我們依然要面對瀏覽器的兼容問題，在不同的瀏覽器下，對這些相關的屬性處理方式也不同，這裡詳細介紹了瀏覽器在處理這些屬性時的差異和最終的解決方法。

Javascript程式碼如下:

<script type="text/javascript">
// 说明：获取鼠标位置
// 整理：http://www.codebit.cn
// 来源：http://www.webreference.com
function 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);
}

關於程式碼的詳細說明如下：

我們首先要宣告一個 evnet 對象，無論移動、點擊、按鍵等，都會啟動一個 evnet ，在 Internet Explorer 裡， event 是全域變量，會被儲存在 window.event 裡． 在 firefox 或其他瀏覽器，event 會被對應的函式取得．當我們將mouseMove函數賦值於document.onmousemove，mouseMove 就會取得滑鼠移動事件。

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

因為在這篇文章中我們需要多次取得滑鼠位置，所以我們設計了一個 mousePosition 函數，它包含一個參數 ： event 。

因為我們要在MSIE 和其他瀏覽器下運行，Firefox 和其他瀏覽器用event.pageX 和event.pageY 來表示滑鼠相對於文件的位置，如果你有一個500*500 的視窗並且你的滑鼠在絕對中間，那麼pageX 和pageY 的值都是250，如果你向下捲動500， 那麼pageY 就會變成750。

MSIE 正好相反，它使用 event.clientX 和 event.clientY 表示滑鼠相當於視窗的位置，而不是文件。在同樣的例子中，如果你向下滾動500，clientY 仍然是 250，因此，我們需要添加 scrollLeft 和 scrollTop 這兩個相對於文檔的屬性。最後，MSIE 中文件並不是從 0，0 開始，而是通常有一個小的邊框（通常是 2 像素），邊框的大小定義在 document.body.clientLeft 和 clientTop 中，我們也把這些加進去。

完成程式碼：

<script type="text/javascript">
// 说明：获取鼠标位置
// 整理：http://www.codebit.cn
// 来源：http://www.webreference.com
function 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程式設計有所幫助。