JavaScript獲取鼠標點擊位置的方法

這篇文章主要介紹了JavaScript獲取鼠標點擊位置的方法，具有一定借鑒價值，需要的朋友可以參考下。希望大家閱讀完這篇文章后大有收獲。下面讓小編帶著大家一起了解一下。

一：鼠標相對于屏幕

如果我們涉及在鼠標點擊的位置，比較簡單的話，我們就可以獲取鼠標點擊之后，利用screenX，screenY來確定點擊的大致位置，從而判斷出與屏幕的上邊距和下邊距的相對位置，我們不要考慮iframe等一些因素，但是在不同的瀏覽器中，表現還是很相同的。

例：

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

二：鼠標相對于瀏覽器的窗口

如果通過以上簡單的代碼來確定位置，往往這些都還不夠，因為在大致的情況下，我們需要得到鼠標相對于瀏覽器窗口的坐標，分別獲取到鼠標現對于窗口的的上邊距和左邊距，可以利用clientX，clientY表示。

例如：

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

三：鼠標相對于文檔

我們可以利用clientX與clientY來得到當前瀏覽器窗口的坐標，但是這些條件都是由限制的，當我如出現在頁面的滾動的情況下，那么相對于文檔的坐標怎么辦呢，這時候我們只要加上滾動的位移就可以了。

例如：

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 };
}

目前火狐瀏覽器的問題會簡單的多，因為火狐支持pageX,與pageY這兩個屬性，已經把頁面滾動計算在內了。

感謝你能夠認真閱讀完這篇文章，希望小編分享JavaScript獲取鼠標點擊位置的方法內容對大家有幫助，同時也希望大家多多支持億速云，關注億速云行業資訊頻道，遇到問題就找億速云，詳細的解決方法等著你來學習!