pageX,clientX,offsetX,layerX的那些事

在各個瀏覽器的JS中,有不少個讓你十分囧的屬性,因爲各大廠商對標準的解釋和執行不同,致使十分混亂,也讓咱們這些前端攻城獅十分無語和糾結>_<

John Resig大神說過,動態元素有3個相當重要的元素,位置,尺寸和可見性.因此,今天,先拿幾個頁面位置屬性開刀.

一.PageX和clientX

PageX和clientX ,這個兩個比較容易搞混,
PageX:鼠標在頁面上的位置,從頁面左上角開始,便是以頁面爲參考點,不隨滑動條移動而變化
clientX:鼠標在頁面上可視區域的位置,從瀏覽器可視區域左上角開始,便是以瀏覽器滑動條此刻的滑動到的位置爲參考點,隨滑動條移動 而變化.
真拗口,直接上圖,

兩個DIV接觸點(黑點位置)
若是將瀏覽器Y軸方向縮小,出現了滑動條就能夠分辨出二者的區別

很明顯,紅色參考塊已經被滑動條截取部分,PageY不變,可是clientY已經變了

但是悲劇的是,PageX只有FF特有,IE這個悲劇沒有啊T_T,因此大牛們想出了一個辦法
PageY=clientY+scrollTop-clientTop;(只討論Y軸,X軸同理,下同)
頁面上的位置=可視區域位置+頁面滾動條切去高度-自身border高度,仍是直接上圖比較清楚

很明顯,模塊交界處,scrollTop表明的是被瀏覽器滑動條滾過的長度,和clientY相加,恰好等於100,最後還要再減去一個clientTop,便是border-top的寬度

Jquery中的PageX的代碼以下.十分精煉..

1 2 3 4 5 6

// Calculate pageX/Y if missing and clientX/Y available if ( event.pageX == null && event.clientX != null ) { var doc = document.documentElement, body = document.body; event.pageX = event.clientX + (doc && doc.scrollLeft || body && body.scrollLeft || 0) - (doc && doc.clientLeft || body && body.clientLeft || 0); event.pageY = event.clientY + (doc && doc.scrollTop || body && body.scrollTop || 0) - (doc && doc.clientTop || body && body.clientTop || 0); }

二.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的當前座標選擇十分混亂,能不用就不用,不討論

網上別人總結的關於這六個糾結的糾結表..

1 2 3 4 5 6

offsetX/offsetY：W3C- IE+ Firefox- Opera+ Safari+ chrome+ x/y：W3C- IE+ Firefox- Opera+ Safari+ chrome+ layerX/layerY：W3C- IE- Firefox+ Opera- Safari+ chrome+ pageX/pageY：W3C- IE- Firefox+ Opera+ Safari+ chrome+ clientX/clientY：W3C+ IE+ Firefox+ Opera+ Safari+ chrome+ screenX/screenY：W3C+ IE+ Firefox+ Opera+ Safari+ chrome+

只有clientX和screenX 皆大歡喜是W3C標準.其餘的,都糾結了. 最給力的是,chrome和safari一條龍通殺!徹底支持全部屬性.其中(offsetX和layerX都是以border爲參考點)...