滑鼠位置（跨瀏覽器）

一、滑鼠事件屬性

1.clientx,clienty

相對於可見視點（visual viewport

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

document.onclick=function

(e)

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

document.onclick=function

(e)

相對於事件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) ;

document.body.onclick = function

(e) 
console.log([pagex, pagey]);
};

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

document.body.onclick = function

(e) ;

document.body.onclick = function

(e) ;

各瀏覽器的滑鼠位置測試

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...