在各個瀏覽器的JS中,有很多個讓你十分囧的屬性,由于各大廠商對標準的解釋和執行不一樣,導致十分混亂,也讓我們這些前端攻城獅十分無語和糾結>_< John Resig大神說過,動態元素有3個至關重要的元素,位置,尺寸和可見性.所以,今天,先拿幾個頁面位置屬性開刀. ### 一.PageX和clientX PageX和clientX ,這個兩個比較容易搞混, PageX:鼠標在頁面上的位置,從頁面左上角開始,即是以頁面為參考點,不隨滑動條移動而變化 clientX:鼠標在頁面上可視區域的位置,從瀏覽器可視區域左上角開始,即是以瀏覽器滑動條此刻的滑動到的位置為參考點,隨滑動條移動 而變化. 真拗口,直接上圖,  兩個DIV接觸點(黑點位置) 如果將瀏覽器Y軸方向縮小,出現了滑動條就可以分辨出兩者的區別  很明顯,紅色參考塊已經被滑動條截取部分,PageY不變,但是clientY已經變了 頁面上的位置=可視區域位置+頁面滾動條切去高度-自身border高度,還是直接上圖比較清楚  ### 二.screenX screenX:鼠標在屏幕上的位置,從屏幕左上角開始,這個沒有任何爭議,不討論 ^_^ ### 三.offsetX和layerX 接下來是offsetX和layerX 鼠標相比較于觸發事件的元素的位置,以元素盒子模型的內容區域的左上角為參考點,如果有boder,可能出現負值  IE以內容區域開始,向上進入border將出現負值 鼠標相比較于當前坐標系的位置,即如果觸發元素沒有設置絕對定位或相對定位,以頁面為參考點,如果有,將改變參考坐標系,從觸發元素盒子模型的border區域的左上角為參考點 也就是當觸發元素設置了相對或者絕對定位后,layerX和offsetX就幸福地生活在一起^-^,幾乎相等,唯一不同就是一個從border為參考點,一個以內容為參考點