js 獲取鼠標的位置

js 獲取鼠標的位置

 (2009-12-14 10:51:39)

轉載

標籤：  鼠標位置   獲取鼠標位置   event   雜談

分類： WEB開發

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

Javascript:

1.  
2. <script type="text/javascript">
3.  
4. // 說明：獲取鼠標位置
5. // 整理：http://www.codebit.cn
6. // 來源：http://www.webreference.com
7.  
8. function mousePosition(ev){
9. if(ev.pageX || ev.pageY){
10. return {x:ev.pageX, y:ev.pageY};
11. }
12. return {
13. x:ev.clientX + document.body.scrollLeft - document.body.clientLeft,
14. y:ev.clientY + document.body.scrollTop - document.body.clientTop
15. };
16. }
17.  
18. </script>

使用方式：
Code:

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>

－－－－－－－－－－－－jquery 方式－－－－－－－－－

<script type="text/javascript"> 
$(document).mousemove(function(e) { 
var xx = e.originalEvent.x || e.originalEvent.layerX || 0; 
var yy = e.originalEvent.y || e.originalEvent.layerY || 0; 
$("#testDiv").text(xx + '---' + yy); 
}); 
</script>