其實我們一直都在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中文網其他相關文章!