您的位置：首页 > 其它

pageX-layerX-clientX-offsetX的区别

2016-04-13 17:04 363 查看

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.onmousedown=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.onmouseup=function(){
27.              document.onmousemove=null;
28.              o.onmousedown=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="拖拽" onmousedown="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>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航