一.PageX和clientX
PageX和clientX ,這個兩個比較容易搞混,
PageX:鼠標在頁面上的位置,從頁面左上角開始,即是以頁面為參考點,不隨滑動條移動而變化。可以理解為：相對#（0.0）坐標絕對定位
clientX:鼠標在頁面上可視區域的位置,從瀏覽器可視區域左上角開始,即是以瀏覽器滑動條此刻的滑動到的位置為參考點,隨滑動條移動 而變化。可以理解為：相對可視化左上角坐標絕對定位
如圖：（小黑點為點擊坐標）
二.screenX
screenX:鼠標在屏幕上的位置,從屏幕左上角開始,這個沒有任何爭議。
三.offsetX和layerX
接下來是offsetX和layerX
offsetX:IE特有,鼠標相比較於觸發事件的元素的位置,以元素盒子模型的內容區域的左上角為參考點,如果有boder,可能出現負值
IE以內容區域開始,向上進入border將出現負值
layerX:FF特有,鼠標相比較於當前坐標系的位置,即如果觸發元素沒有設置絕對定位或相對定位,以頁面為參考點,如果有,將改變參考坐標系,從觸發元素盒子模型的border區域的左上角為參考點
也就是當觸發元素設置了相對或者絕對定位后,layerX和offsetX就幸福地生活在一起^-^,幾乎相等,唯一不同就是一個從border為參考點,一個以內容為參考點
FF從border開始,
x/y:IE特有,這個本來和layerX/layerY的作用基本一樣,但是IE的當前坐標選擇十分混亂,能不用就不用,不討論
網上別人總結的關於這六個糾結的糾結表。
素材來源網絡！