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 ...