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為參考點)…
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<style type="text/css">
*{margin:0;padding:0}
span{padding-right:10px;}
</style>
</head>
<body>
<div id="father" style="border:0px solid red;width:200px;">
<div id="a" style="background:red;width:100px;height:100px">長,寬都是100px</div>
<div id="b" style="border-top:0px solid red;background:yellow;width:100px;height:100px;margin-left:100px;"></div>
</div>
<table>
<tr>
<td>pageX:<span id="pageX"></span></td>
<td>clientX:<span id="clientX"></span></td>
<td>scrollLeft:<span id="scrollLeft"></span></td>
<td>screenX:<span id="screenX"></span></td>
<td>offsetX:<span id="offsetX"></span></td>
<td>layerX:<span id="layerX"></span></td>
</tr>
<tr>
<td>pageY:<span id="pageY"></span></td>
<td>clientY:<span id="clientY"></span></td>
<td>scrollTop:<span id="scrollTop"></span></td>
<td>screenY:<span id="screenY"></span></td>
<td>offsetY:<span id="offsetY"></span></td>
<td>layerY:<span id="layerY"></span></td>
</tr>
</table>
<br/>
<br/>
<pre>
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+
</pre>
</body>
<script>
var $=function(id){
return ("string"==typeof id) ? document.getElementById(id):id;
};
function text(e){
e=e||window.event;
//IE
var doc=document.documentElement;
//chrome
var body = document.body;
$("pageX").innerHTML=e.pageX;
$("pageY").innerHTML=e.pageY;
$("clientX").innerHTML=e.clientX;
$("clientY").innerHTML=e.clientY;
$("screenX").innerHTML=e.screenY;
$("screenY").innerHTML=e.screenY;
$("scrollTop").innerHTML=doc && doc.scrollTop;
$("scrollLeft").innerHTML=doc && doc.scrollLeft;
$("offsetX").innerHTML=e.offsetX;
$("offsetY").innerHTML=e.offsetY;
$("layerX").innerHTML=e.layerX;
$("layerY").innerHTML=e.layerY;
}
$("a").onmousemove=function(e){ text(e);}
$("b").onmousemove=function(e){ text(e);}
</script>
</html>