滑鼠位置(跨瀏覽器)

2022-10-11 06:21:10 字數 1697 閱讀 8474

一、滑鼠事件屬性

1.clientx,clienty

相對於可見視點(visual viewport

)的滑鼠位置,即當前瀏覽器顯示區域(視窗)的位置,點選客戶端礦口的左上角時 clientx 和 clienty 都為0,即使使用者拖動了水平或垂直滾動條

document.onclick=function

(e)

2.screenx,screeny

相對於使用者螢幕的滑鼠位置,一定比clientx和clienty大

document.onclick=function

(e)

3.offsetx,offsety

相對於事件target的滑鼠位置,這個屬性各個瀏覽器的實現不一致,注意,指的是target,而不是currenttarget

ie特有,滑鼠相比較於觸發事件的元素的位置,以元素盒子模型的內容區域的左上角為參考點,如果有boder,可能出現負值。ie以內容區域開始,滑鼠向上進入border將出現負值。

4.pagex,pagey

相對於html文件的位置,>=clientx/clienty

5.layerx,layery

相對於最近的被 positioned 的祖先元素,如果沒有被 positioned 的祖先元素,就相對於html文件(類似於pagex, pagey)

ff特有,滑鼠相比較於當前座標系的位置,即如果觸發元素沒有設定絕對定位或相對定位,以頁面為參考點,如果有,將改變參考座標系,從觸發元素盒子模型的border區域的左上角為參考點。

offsetx以border為參考,layerx以內容為參考。

二、標準化

1.計算pagex和pagey

ie8 以下不支援這兩個屬性。如果你使用jquery時,它會自動為你標準化這兩個屬性。如果你使用的不是jquery的標準事件,而是原生事件物件,你可以使用jquery.event.fix函式來標準事件物件。例如:

document.body.onclick = function

(e) ;

在沒有jquery的情況下,可以通過將 pagex 和 pagey 與 scrollleft 和 scrolltop 相加來計算 clientx 和 clienty

document.body.onclick = function

(e)

console.log([pagex, pagey]);

};

2.計算offsetx,offsety

根據w3c工作草案,offsetx 和 offsety 應該相對於事件的 target 元素的內邊距邊緣。只用 ie 符合此標準,webkit 相對的是邊框邊緣,opera 相對的是內容邊緣,而 firefox 不支援該屬性

document.body.onclick = function

(e) ;

如果要實現w3c草案,只需要減去邊框目標元素的邊框大小即可:

document.body.onclick = function

(e) ;

element.getboundingclientrect,最近發現了乙個圖,特別能展示它的功能

各瀏覽器的滑鼠位置測試

e.pagex e.layerx e.offsetx e.clientx e.x屬性 測試 瀏覽器 ff9 chrome15 opera11.52 safari5 win ie6 7 8 9 測試 圖示 測試結果如下 chrome e.pagex 相對整個頁面的座標 e.layerx 相對當前座標系...

各瀏覽器的滑鼠位置測試

廢話不多說,下面分別檢測各個瀏覽器下的 e.pagex e.layerx e.offsetx e.clientx e.x屬性 測試瀏覽器 ff9 chrome15 opera11.52 safari5 win ie6 7 8 9 圖示 測試結果如下 chrome e.pagex 相對整個頁面的座標 ...

瀏覽器跨域

前端部分,簡單的封裝乙個promise版的ajax let myajax function headers else xhr.open method,path for let key,value of object.entries headers xhr.send body myajax heade...