JavaScript如何取得滑鼠點擊的位置？取得的三種方法匯總

其實我們一直都在dom中和元素打交道，這也是手機互動的一個比較常用的方面，但是很多程式設計師比較失望，在不同的瀏覽器中，會出現不同的結果，下面我們就來講一下利用js如何取得滑鼠點擊的位置，並且為您總結詳細的教學。

一：滑鼠相對於螢幕

如果我們涉及在滑鼠點擊的位置，比較簡單的話，我們就可以取得滑鼠點擊之後，利用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如何取得滑鼠點擊的位置？取得的三種方法彙總的完整介紹，如果你想了解更多有關JavaScript影片教學#，請關注php中文網。

以上是JavaScript如何取得滑鼠點擊的位置？取得的三種方法匯總的詳細內容。更多資訊請關注PHP中文網其他相關文章！