pageX,clientX,offsetX,layerX的區(qū)別
原文鏈接：http://www.funnyhao.com/pagex-clientx-offsetx-layerx-of-those-things/
在各個(gè)瀏覽器的JS中,有很多個(gè)讓你十分囧的屬性,由于各大廠商對(duì)標(biāo)準(zhǔn)的解釋和執(zhí)行不一樣,導(dǎo)致十分混亂,也讓我們這些前端攻城獅十分無(wú)語(yǔ)和糾結(jié)><
John Resig大神說(shuō)過(guò),動(dòng)態(tài)元素有3個(gè)至關(guān)重要的元素,位置,尺寸和可見性.所以,今天,先拿幾個(gè)頁(yè)面位置屬性開刀.
一.PageX和clientX
PageX和clientX ,這個(gè)兩個(gè)比較容易搞混,PageX:鼠標(biāo)在頁(yè)面上的位置,從頁(yè)面左上角開始,即是以頁(yè)面為參考點(diǎn),不隨滑動(dòng)條移動(dòng)而變化clientX:鼠標(biāo)在頁(yè)面上可視區(qū)域的位置,從瀏覽器可視區(qū)域左上角開始,即是以瀏覽器滑動(dòng)條此刻的滑動(dòng)到的位置為參考點(diǎn),隨滑動(dòng)條移動(dòng) 而變化.真拗口,直接上圖,
[圖片上傳中谱净。窑邦。。（1）]
兩個(gè)DIV接觸點(diǎn)(黑點(diǎn)位置) 如果將瀏覽器Y軸方向縮小,出現(xiàn)了滑動(dòng)條就可以分辨出兩者的區(qū)別 [圖片上傳中壕探。冈钦。。（2）]
很明顯,紅色參考?jí)K已經(jīng)被滑動(dòng)條截取部分,PageY不變,但是clientY已經(jīng)變了
可是悲劇的是,PageX只有FF特有,IE這個(gè)悲劇沒有啊T_T,所以大牛們想出了一個(gè)辦法PageY=clientY+scrollTop-clientTop;(只討論Y軸,X軸同理,下同)頁(yè)面上的位置=可視區(qū)域位置+頁(yè)面滾動(dòng)條切去高度-自身border高度,還是直接上圖比較清楚
[圖片上傳中李请。瞧筛。。（3）]
很明顯,模塊交界處,scrollTop代表的是被瀏覽器滑動(dòng)條滾過(guò)的長(zhǎng)度,和clientY相加,剛好等于100,最后還要再減去一個(gè)clientTop,即是border-top的寬度
Jquery中的PageX的代碼如下.十分精煉..
1 2 3 4 5 6 // Calculate pageX/Y if missing and clientX/Y availableif(event.pageX==null&&event.clientX!=null){vardoc =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:鼠標(biāo)在屏幕上的位置,從屏幕左上角開始,這個(gè)沒有任何爭(zhēng)議,不討論 ^^
三.offsetX和layerX
接下來(lái)是offsetX和layerXoffsetX:IE特有,鼠標(biāo)相比較于觸發(fā)事件的元素的位置,以元素盒子模型的內(nèi)容區(qū)域的左上角為參考點(diǎn),如果有boder,可能出現(xiàn)負(fù)值
IE以內(nèi)容區(qū)域開始,向上進(jìn)入border將出現(xiàn)負(fù)值
layerX:FF特有,鼠標(biāo)相比較于當(dāng)前坐標(biāo)系的位置,即如果觸發(fā)元素沒有設(shè)置絕對(duì)定位或相對(duì)定位,以頁(yè)面為參考點(diǎn),如果有,將改變參考坐標(biāo)系,從觸發(fā)元素盒子模型的border區(qū)域的左上角為參考點(diǎn)也就是當(dāng)觸發(fā)元素設(shè)置了相對(duì)或者絕對(duì)定位后,layerX和offsetX就幸福地生活在一起-,幾乎相等,唯一不同就是一個(gè)從border為參考點(diǎn),一個(gè)以內(nèi)容為參考點(diǎn)
[圖片上傳中导盅。较幌。。（5）]
FF從border開始,
x/y:IE特有,這個(gè)本來(lái)和layerX/layerY的作用基本一樣,但是IE的當(dāng)前坐標(biāo)選擇十分混亂,能不用就不用,不討論
網(wǎng)上別人總結(jié)的關(guān)于這六個(gè)糾結(jié)的糾結(jié)表..
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標(biāo)準(zhǔn).其他的,都糾結(jié)了.最給力的是,chrome和safari一條龍通殺!完全支持所有屬性.其中(offsetX和layerX都是以border為參考點(diǎn))...
調(diào)式頁(yè)面連接.
