|
參考：
http://blog.csdn.NET/crazy_fire/article/details/7721587
http://www./pagex-clientx-offsetx-layerx-of-those-things/
1.offsetX和layerX
offsetX:
IE特有（新版本瀏覽器 除了ff都支持）,鼠標(biāo)相比較于觸發(fā)事件的元素的位置,以元素盒子模型的內(nèi)容區(qū)域的左上角為參考點(diǎn),如果有boder,可能出現(xiàn)負(fù)值。
layerX:
FF特有,鼠標(biāo)相比較于當(dāng)前坐標(biāo)系的位置,即如果觸發(fā)元素沒有設(shè)置絕對定位或相對定位,以頁面為參考點(diǎn),如果有,將改變參考坐標(biāo)系,從觸發(fā)元素盒子模型的border區(qū)域的左上角為參考點(diǎn)，
也就是當(dāng)觸發(fā)元素設(shè)置了相對或者絕對定位后,layerX和offsetX就幸福地生活在一起^-^,幾乎相等,唯一不同就是一個從border為參考點(diǎn),一個以內(nèi)容為參考點(diǎn)
2.PageX和clientX
PageX和clientX ,這個兩個比較容易搞混,
PageX:鼠標(biāo)在頁面上的位置,從頁面左上角開始,即是以頁面為參考點(diǎn),不隨滑動條移動而變化
clientX:鼠標(biāo)在頁面上可視區(qū)域的位置,從瀏覽器可視區(qū)域左上角開始,即是以瀏覽器的可視窗口為參考點(diǎn),隨滑動條移動 而變化.
IE中沒有PageX，解決辦法：
PageY=clientY+scrollTop-clientTop;
頁面上的位置=可視區(qū)域位置+頁面滾動條切去高度-自身border高度
jQuery中的PageX代碼：
- <span style="font-family:Microsoft YaHei;">// 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);
- }</span>
網(wǎng)上別人總結(jié)的關(guān)于這六個糾結(jié)的糾結(jié)表..
- <span style="font-family:Microsoft YaHei">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+</span>
附:一個可以自由拖動的代碼 （ js實(shí)現(xiàn)）
- <span style="font-family:Microsoft YaHei;"><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www./TR/xhtml1/DTD/xhtml1-transitional.dtd">
- <html xmlns="http://www./1999/xhtml">
- <head>
- <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
- <title>無標(biāo)題文檔</title>
- <script type="text/javascript">
- function drag(o){
- if(!document.getElementById){return false};
- o=document.getElementById(o);
- if(!o){return false};
- o.style.position="absolute";
- o.onmousedown=function(e){
- e=e||window.event;
- var x=e.layerX||e.offsetX;
- var y=e.layerY||e.offsetY;
- document.onmousemove=function(e){
- e=e||window.event;
- //獲取所有瀏覽器的e.pageX
- if ( e.pageX == null && e.clientX != null ) {
- var doc = document.documentElement, body = document.body;
- e.pageX = e.clientX + (doc && doc.scrollLeft || body && body.scrollLeft || 0) - (doc && doc.clientLeft || body && body.clientLeft || 0);
- e.pageY = e.clientY + (doc && doc.scrollTop || body && body.scrollTop || 0) - (doc && doc.clientTop || body && body.clientTop || 0);
- }
- o.style.left=(e.pageX-x)+"px"; //如果沒有滾動條，用e.clientX也是對的
- o.style.top=(e.pageY-y)+"px";};
- document.onmouseup=function(){
- document.onmousemove=null;
- o.onmousedown=null;
- }
- }
- }
- </script>
- </head>
- <body>
- <div id="cen">
- <p class="control" style="margin-bottom:10px; cursor:move" title="拖拽" onmousedown="drag('cen')" >點(diǎn)俺拖拽</p>
-
- <p>1111111111111111111111</p>
- <p>111111111111111</p>
- <p>1111111111</p></div>
-
- <p style="height:900px;">測試</p>
- </body>
- </html>
- </span>
上面代碼有一個問題，在拖動目標(biāo)的時候，經(jīng)常有文字被選中，解決這個問題需要加入下面代碼片段：
- <span style="font-family:Microsoft YaHei;">try{
- if(document.selection){//IE ,Opera
- if(document.selection.empty)
- document.selection.empty();//IE
- else{//Opera
- document.selection = null;
- }
- }else if(window.getSelection){//FF,Safari
- window.getSelection().removeAllRanges();
- }
- }catch(e){}</span>
附張圖：（網(wǎng)上搜的）
|
