首頁 > 開發者 > JavaScript

用 javascript 擷取滑鼠(游標)的座標位置 相容IE/Firefox等瀏覽器

來源：互聯網
上載者：User
創建阿里雲帳戶，並獲得超過 40 款產品的免費試用版；而企業帳戶則可以享有總值 $1200 的免費試用版。立即註冊！
 javascript 擷取當頁面上滑鼠（游標）位置在許多情況下都會用到，比如拖放，懸停提示（tooltip） 等等。當然，這裡我們依然要面對瀏覽器的相容問題，在不同的瀏覽器下，對這些相關的屬性處理方式也不同，本文詳細介紹了瀏覽器在處理這些屬性時的差異和最終的解決方案。  

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

      		1.

      由於這個需求我們經常用到，所以我們將這段代碼獨立成一篇文章，供新手查詢。  

      使用方式：

      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 中，我們也把這些加進去。

      很幸運，我們現在已經用 mousePosition 函數解決了座標問題，不需為此費心了。

       

      下面是完整的案例，將其儲存為HTML即可運行：

      <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
      <html xmlns="http://www.w3.org/1999/xhtml">
      <head>
      <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
      <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7"/>
      <meta name="auther" content="fq" />
      <title>擷取滑鼠座標</title>  

      </head>

      <body>
      <script type="text/javascript">
      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
             };
       }

      function mouseMove(ev){
          ev = ev || window.event;
          var mousePos = mousePosition(ev);
          document.getElementById('xxx').value = mousePos.x;
        document.getElementById('yyy').value = mousePos.y;
      }  

      document.onmousemove = mouseMove;
      </script>
      X:<input id="xxx" type="text" />  Y:<input id="yyy" type="text" />
      </body>
      </html>  

      本文章原先以中文撰寫並發佈於 aliyun.com，亦設英文版本，僅作資訊用途。本網站不對文章的準確性，完整性或可靠性或其任何翻譯作出任何明示或暗示的陳述或保證。如對該文章有任何疑慮或投訴，請傳送電郵至 info-contact@alibabacloud.com 並提供相關疑慮或投訴的詳細說明。職員會於 5 個工作天內與您聯絡，一經驗證之後，即會刪除該侵權內容。

      聯繫我們

      該頁面正文內容均來源於網絡整理，並不代表阿里雲官方的觀點，該頁面所提到的產品和服務也與阿里云無關，如果該頁面內容對您造成了困擾，歡迎寫郵件給我們，收到郵件我們將在5個工作日內處理。

      如果您發現本社區中有涉嫌抄襲的內容，歡迎發送郵件至： info-contact@alibabacloud.com 進行舉報並提供相關證據，工作人員會在 5 個工作天內聯絡您，一經查實，本站將立刻刪除涉嫌侵權內容。

      A Free Trial That Lets You Build Big!

      Start building with 50+ products and up to 12 months usage for Elastic Compute Service

      Get Started for Free

      • Sales Support

        1 on 1 presale consultation

        Chat Contact Sales

      • After-Sales Support

        24/7 Technical Support 6 Free Tickets per Quarter Faster Response

        Open a Ticket

      • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

        Learn More