基於JavaScript取得滑鼠位置的各種方法_javascript技巧

在某些DOM操作中我們經常會跟元素的位置打交道，滑鼠互動一個經常用到的方面，令人失望的是不同的瀏覽器下會有不同的結果甚至是有的瀏覽器下沒結果，這篇文章就上滑鼠點擊位置座標獲取做一些簡單的總結，沒特殊聲明代碼在IE8，FireFox，Chrome下進行測試兼容

滑鼠點選位置座標

相對於螢幕

如果是涉及滑鼠點擊確定位置相對比較簡單，取得到滑鼠點擊事件後，事件screenX，screenY取得的是點擊位置相對於螢幕的左邊距與上邊距，不考慮iframe因素，不同瀏覽器下表現的還算一致。

function getMousePos(event) {
      var e = event || window.event;
      return {'x':e.screenX,'y':screenY}
    } 

相對瀏覽器視窗

簡單程式碼即可實現，然而這是還不夠，因為絕大多數情況下我們希望取得滑鼠點擊位置相對於瀏覽器視窗的座標，event的clientX，clientY屬性分別表示滑鼠點擊位置相對於文件的左邊距，上邊距。於是類似的我們寫出了這樣的程式碼

function getMousePos(event) {
      var e = event || window.event;
      return {'x':e.clientX,'y':clientY}
    } 

相對文件

簡單測試也沒什麼問題，但是clientX與clientY獲取的是相對於當前屏幕的坐標，忽略頁面滾動因素，這在很多條件下很有用，但當我們需要考慮頁面滾動，也就是相對於文檔（ body元素）的座標時怎麼辦呢？加上滾動的位移就可以了，下邊我們試試看怎麼計算頁面滾動的位移。

其實在Firefox下問題會簡單很多，因為Firefox支援屬性pageX,與pageY屬性，這兩個屬性已經把頁面捲動計算在內了。

在Chrome可以透過document.body.scrollLeft，document.body.scrollTop計算出頁面滾動位移，而在IE下可以透過document.documentElement.scrollLeft ，document.documentElement.scrollTop

function getMousePos(event) {
      var e = event || window.event;
      var scrollX = document.documentElement.scrollLeft || document.body.scrollLeft;
      var scrollY = document.documentElement.scrollTop || document.body.scrollTop;
      var x = e.pageX || e.clientX + scrollX;
      var y = e.pageY || e.clientY + scrollY;
      //alert('x: ' + x + '\ny: ' + y);
      return { 'x': x, 'y': y };
    } 

以上內容是小編跟大家介紹的基於JavaScript取得滑鼠位置的各種方法，希望大家喜歡。