首頁  >  文章  >  web前端  >  JavaScript如何取得滑鼠點擊的位置?取得的三種方法匯總

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

云罗郡主
云罗郡主原創
2018-10-29 13:41:4111879瀏覽

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

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如何取得滑鼠點擊的位置?取得的三種方法彙總的完整介紹,如果你想了解更多有關JavaScript影片教學#,請關注php中文網。


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

陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn