js獲取滑鼠位置的各種方法

2022-02-09 15:23:10 字數 914 閱讀 9078

在一些dom操作中我們經常會跟元素的位置打交道,滑鼠互動式乙個經常用到的方面,令人失望的是不同的瀏覽器下會有不同的結果甚至是有的瀏覽器下沒結果,這篇文章就上滑鼠點選位置座標獲取做一些簡單的總結,沒特殊宣告**在ie8,firefox,chrome下進行測試相容

相對於螢幕

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

function getmousepos(event) 

}

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

function getmousepos(event) 

}

簡單測試也沒什麼問題,但是clientx與clienty獲取的是相對於當前螢幕的座標,忽略頁面滾動因素,這在很多條件下很有用,但當我們需要考慮頁面滾動,也就是相對於文件(body元素)的座標時怎麼辦呢?加上滾動的位移就可以了,下邊我們試試怎麼計算頁面滾動的位移。

其實在firefox下問題會簡單很多,因為firefox支援屬性pagex,與pagey屬性,這兩個屬性已經把頁面滾動計算在內了。

在chrome可以通過document.body.scrollleft,document.body.scrolltop計算出頁面滾動位移,而在ie下可以通過document.documentelement.scrollleft ,document.documentelement.scrolltop

function getmousepos(event) ;

}

react獲取滑鼠位置 js實時獲取滑鼠所在座標

有的時候我們希望實時獲取滑鼠所在的位置。為什麼會用到它呢?可能你會遇到這樣的情況,我們需要判斷滑鼠是不是在乙個dom元素的上 下 左 右的位置,至於是不是在元素上,就不需要通過獲取位置了,你可以直接用hover來判斷就好了。那麼如何實現獲取滑鼠所在位置呢 function getmousepos e...

JS獲取滑鼠位置,相容IE FF

由於firefox和ie等瀏覽器之間對js解釋的方式不一樣,firefox下面獲取滑鼠位置不能夠直接使用clientx來獲取。網上說的一般都是觸發mousemove事件才行。我這裡有兩段 思路都一樣,就是風格不同。第一段 是利用全域性變數來獲取實時滑鼠的位置。var xpos var ypos wi...

JS獲取滑鼠位置,相容IE FF

由於firefox和ie等瀏覽器之間對js解釋的方式不一樣,firefox下面獲取滑鼠位置不能夠直接使用clientx來獲取。網上說的一般都是觸發mousemove事件才行。我這裡有兩段 思路都一樣,就是風格不同。第一段 是利用全域性變數來獲取實時滑鼠的位置。var xpos var ypos wi...