pageX-layerX-clientX-offsetX的区别

最新推荐文章于 2023-07-05 15:40:48 发布

七夜丨鸣

最新推荐文章于 2023-07-05 15:40:48 发布

阅读量950

点赞数

PageX和clientX

这个两个比较容易搞混，

PageX：鼠标在页面上的位置，从页面左上角开始，即是以页面为参考点，不随滑动条移动而变化

clientX：鼠标在页面上可视区域的位置，从浏览器可视区域左上角开始，即是以浏览器的可视窗口为参考点,随滑动条移动而变化

IE中没有PageX，解决办法：

PageY = clientY + scrollTop - clientTop；

页面上的位置 = 可视区域位置 + 页面滚动条切去高度 - 自身border高度

Jquery中的PageX代码：

1. <span style="font-family:Microsoft YaHei;">// Calculate pageX/Y if missing and clientX/Y available  
2. if ( event.pageX == null && event.clientX !=  null ) {  
3.     var doc = document.documentElement, body = document.body;  
4.     event.pageX = event.clientX + (doc && doc.scrollLeft || body && body.scrollLeft || 0) - (doc && doc.clientLeft  || body && body.clientLeft || 0);  
5.     event.pageY = event.clientY + (doc && doc.scrollTop  ||  body && body.scrollTop  || 0) - (doc && doc.clientTop  || body && body.clientTop  || 0);  
6. }
7. </span>

offsetX和layerX

offsetX：

新版本浏览器，除了ff都支持，鼠标相比较于触发事件的元素的位置，以元素盒子模型的内容区域的左上角为参考点，如果有boder，可能出现负值。

layerX：

鼠标相比较于当前坐标系的位置，即如果触发元素没有设置绝对定位或相对定位，以页面为参考点，如果有，将改变参考坐标系，从触发元素盒子模型的border区域的左上角为参考点，

也就是当触发元素设置了相对或者绝对定位后，layerX和offsetX就幸福地生活在一起^-^，几乎相等，唯一不同就是一个从border为参考点，一个以内容为参考点。

需要注意的是layerX和x这两个属性

event.x本来是IE的，但是除了FF之外，其他的也都实现了这个属性，但是opera，chrome和safari和IE的实现并不一致，opera，chrome和safari的event.x返回值和event.clientX相同

opera没有实现layerX，IE9实现了，但是IE9又是个奇葩，layerX实现得稀奇古怪。

附：一个可以自由拖动的代码（ js实现）

1. <span style="font-family:Microsoft YaHei;"><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
2. <html xmlns="http://www.w3.org/1999/xhtml">  
3. <head>  
4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  
5. <title>无标题文档</title>  
6. <script type="text/javascript">  
7.   function drag(o){  
8.     if(!document.getElementById){return false};  
9.     o=document.getElementById(o);  
10.     if(!o){return false};  
11.     o.style.position="absolute";  
12.     o.οnmοusedοwn=function(e){  
13.         e=e||window.event;  
14.         var x=e.layerX||e.offsetX;  
15.         var y=e.layerY||e.offsetY;  
16.         document.onmousemove = function(e){  
17.            e=e||window.event;  
18.  <span style="white-space:pre">		</span>//获取所有浏览器的e.pageX   
19. <span style="white-space:pre">		</span> if ( e.pageX == null && e.clientX !=  null ) {  
20.    <span style="white-space:pre">		</span>     var doc = document.documentElement, body = document.body;  
21.     <span style="white-space:pre">	</span>     e.pageX = e.clientX + (doc && doc.scrollLeft || body && body.scrollLeft  || 0) - (doc && doc.clientLeft  || body && body.clientLeft || 0);  
22.    <span style="white-space:pre">		</span>     e.pageY = e.clientY + (doc && doc.scrollTop  ||  body && body.scrollTop  || 0) - (doc && doc.clientTop  || body && body.clientTop  || 0);  
23.<span style="white-space:pre">		</span> }            
24.            o.style.left=(e.pageX-x)+"px";  //如果没有滚动条，用e.clientX也是对的  
25.            o.style.top=(e.pageY-y)+"px";};  
26.            document.οnmοuseup=function(){  
27.              document.οnmοusemοve=null;  
28.              o.οnmοusedοwn=null;     
29.           }  
30.        }  
31.     }  
32. </script>  
33. </head>  
34. <body>  
35. <div id="cen">  
36. <span style="white-space:pre">	</span><p class="control" style="margin-bottom:10px; cursor:move" title="拖拽" οnmοusedοwn="drag('cen')" >点俺拖拽</p>  
37.   
38. <span style="white-space:pre">	</span><p>1111111111111111111111</p>  
39. <span style="white-space:pre">	</span><p>111111111111111</p>  
40. <span style="white-space:pre">	</span><p>1111111111</p></div>  
41.   
42. <p style="height:900px;">测试</p>  
43. </body>  
44. </html>  
45. </span>

上面代码有一个问题，在拖动目标的时候，经常有文字被选中，解决这个问题需要加入下面代码片段：

1. <span style="font-family:Microsoft YaHei;">
2. try{  
3.       if(document.selection){//IE ,Opera  
4.           if(document.selection.empty)  
5.                document.selection.empty();//IE  
6.           else{//Opera  
7.                document.selection = null;  
8.           }  
9.       }else if(window.getSelection){//FF,Safari  
10.          window.getSelection().removeAllRanges();  
11.       } 
12.  }catch(e){}
13. </span>