Page和client的區別

2022-07-30 14:12:10 字數 1832 閱讀 2997

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的寬度

接下來是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為參考點)…

scroll offset和client的區別

整體布局 12 title 比較 1.clientx與clienty window.onload function oevent.clientx是指滑鼠到可視區左邊框的距離。oevent.clienty是指滑鼠到可視區上邊框的距離。2.offsetwidth offsetheight offsetl...

scroll offset和client如何區分

title 比較 1.clientx與clienty window.nl ad function oevent.clientx是指滑鼠到可視區左邊框的距離。oevent.clienty是指滑鼠到可視區上邊框的距離。2.offsetwidth offsetheight offsetleft和offse...

簡單的server和client模型

本 主要有一下幾個技術的解決方案 埠復用技術 防止tcp流協議粘包 我們使用的是指定buf大小的方式 include include include include include include include include include define err exit m do while ...