offsetX/offsetY：相对于当前元素的位移
x/y：相对于当前座标系的位移，但是IE常常搞错当前座标系
layerX/layerY：相对于当前座标系的位移
pageX/pageY：相对于网页的位移
clientX/clientY：相对于可视窗口的位移
screenX/screenY：相对于屏幕的位移

offsetX/offsetY：W3C- IE+ Firefox- Opera+ Safari+
x/y：W3C- IE+ Firefox- Opera+ Safari+
layerX/layerY：W3C- IE- Firefox+ Opera- Safari+
pageX/pageY：W3C- IE- Firefox+ Opera+ Safari+
clientX/clientY：W3C+ IE+ Firefox+ Opera+ Safari+
screenX/screenY：W3C+ IE+ Firefox+ Opera+ Safari+

六对属性只有clientX/clientY和screenX/screenY是W3C规范内的。
而offsetX/offsetY和pageX/pageY知其一组即可通过计算取得另一组，对于JS开发者而言，Firefox/Opera/Safari提供的pageX/pageY更加实用。x/y和layerX/layerY本应该是作用相同、名称不同的两组属性，即相对于offsetParent对象的位移，但是IE对offsetParent的判断却相当不准确，大部份情况下offsetParent对象都等于body对象，最严重的后果就是在一个绝对定位的层中offsetParent对象本应该为层对象，可IE却依旧为body对象，导致座标系混乱，而Opera和Safari中的x/y则同样继承了IE中的错误，因此x/y属性能不用则不用.

layerX:

Returns the horizontal coordinate of the event relative to the current layer.

https://developer.mozilla.org/en-US/docs/Web/API/event.layerX

-------------、

FF没有offsetX属性，有个layerX属性，只要将事件源的位置设置成相对定位(position:relative)或绝对定位(position:absolute)，两者结果就相等，表示事件源相对于父元素的X坐标。

一个简单的例子：判断鼠标位于事件源左边还是右边，在图片点击自动翻页中常用到。

  1. function GetMousePosStr (evnt,ele)
  2. {
  3.     if(!evnt)
  4.     {
  5.         evnt = window.event;
  6.     }
  7.  
  8.     var offsetX = evnt.offsetX ? evnt.offsetX : evnt.layerX;
  9.  
  10.     if(evnt.offsetX < ele.offsetWidth / 2)
  11.     {
  12.         return 'left';
  13.     }
  14.     else
  15.     {
  16.         return 'right';
  17.     }
  18. }

------------

转载一篇文章：

参考：

http://blog.csdn.net/crazy_fire/article/details/7721587

http://www.funnyhao.com/pagex-clientx-offsetx-layerx-of-those-things/

1.offsetX和layerX

offsetX:

IE特有,鼠标相比较于触发事件的元素的位置,以元素盒子模型的内容区域的左上角为参考点,如果有boder,可能出现负值。

layerX:

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

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

2.PageX和clientX

PageX和clientX ,这个两个比较容易搞混,

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

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

IE中没有PageX，解决办法：

PageY=clientY+scrollTo-clientTop;

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

Jquery中的PageX代码：

  1. // 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. }

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

  1. <!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.  //获取所有浏览器的e.pageX
  19.  if ( e.pageX == null && e.clientX !=  null ) {
  20.     var doc = document.documentElement, body = document.body;
  21.     e.pageX = e.clientX + (doc && doc.scrollLeft || body && body.scrollLeft || 0) - (doc && doc.clientLeft  || body && body.clientLeft || 0);
  22.     e.pageY = e.clientY + (doc && doc.scrollTop  ||  body && body.scrollTop  || 0) - (doc && doc.clientTop  || body && body.clientTop  || 0);
  23. }
  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. <p class="control" style="margin-bottom:10px; cursor:move" title="拖拽" onmousedown="drag('cen')" >点俺拖拽</p>  
  37.  
  38. <p>1111111111111111111111</p>
  39. <p>111111111111111</p>
  40. <p>1111111111</p></div>  
  41.  
  42. <p style="height:900px;">测试</p>
  43. </body>
  44. </html>

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

  1. try{
  2.       if(document.selection){//IE ,Opera
  3.           if(document.selection.empty)
  4.                    document.selection.empty();//IE
  5.           else{//Opera
  6.                    document.selection = null;
  7.           }
  8.       }else if(window.getSelection){//FF,Safari
  9.            window.getSelection().removeAllRanges();
  10.       }
  11. }catch(e){}

layerX offsetX pageX的更多相关文章

  1. ev的offsetX,pageX,clientX和screenX

    event.offsetX.event.offsetY(相对事件发生的具体元素左上角的定位) 鼠标相对于事件源元素(srcElement)的X,Y坐标,只有IE事件有这2个属性,标准事件没有对应的属性 ...

  2. jQuery中 pageX,clientX,offsetX,layerX的区别

    一.PageX和clientXPageX和clientX ,这个两个比较容易搞混,PageX:鼠标在页面上的位置,从页面左上角开始,即是以页面为参考点,不随滑动条移动而变化.可以理解为:相对#(0.0 ...

  3. pageX,clientX,offsetX,layerX的区别

    pageX,clientX,offsetX,layerX的区别 在各个浏览器的JS中,有很多个让你十分囧的属性,由于各大厂商对标准的解释和执行不一样,导致十分混乱,也让我们这些前端攻城狮十分无语和纠结 ...

  4. pageX,clientX,offsetX,layerX的那些事

    在各个浏览器的JS中,有很多个让你十分囧的属性,由于各大厂商对标准的解释和执行不一样,导致十分混乱,也让我们这些前端攻城狮十分无语和纠结>_< John Resig大神说过,动态元素有3个 ...

  5. event对象中offsetX,clientX,pageX,screenX的区别

    1.offsetXoffset意为偏移量,是事件对象距左上角为参考原点的距离.以元素盒子模型的内容区域的左上角为参考点.不包括border.2.clientX事件对象相对于浏览器窗口可视区域的X,Y坐 ...

  6. clientX,pageX,screenX，offsetLeft，scrollTop

    出处:点击打开链接 一直不太明白,今天看了一下,感觉挺详细,先转载过来....... clientX 观点:鼠标相对于WINDOWS的坐标. 这里这个WINDOWS是指我们能看见的浏览器大小.所以不可 ...

  7. 关于js的回调函数的一点看法

    算了一下又有好几个月没写博客了,最近在忙公司android的项目,所以也就很少抽时间来写些东西了.刚闲下来,我就翻了翻之前看的东西.做了android之后更加感觉到手机端开发的重要性,现在做nativ ...

  8. JS获得鼠标位置

    <body> <script> function mouseMove(ev) { ev = ev || window.event; var mousePos = mouseCo ...

  9. js中的各种宽高以及位置总结

    在javascript中操作dom节点让其运动的时候,常常会涉及到各种宽高以及位置坐标等概念,如果不能很好地理解这些属性所代表的意义,就不能理解js的运动原理,同时,由于这些属性概念较多,加上浏览器之 ...

随机推荐

  1. wordpress函数技巧

    1.Loop循环(成功) <?php if(have_posts()) : ?> <?php while(have_posts()) : the_post(); ?> // t ...

  2. psycopg2关于undefined symbol: lo_truncate64解决方法

    今天,在centos6.5下安装psycopg2,利用Python连接PostgreSQL数据库的时候,出现了一个undefined symbol: lo_truncate6的错误: django.c ...

  3. jquery load(URL,FUNCTION(){}) 异步加载页面

    $("#btnSearch").click(function () { var queryUrl = '/Report/LoadInsClassifFileNew'; if ($( ...

  4. android--graphics

    Color类 Constants |____BLACK, BLUE, CYAN Methods |____argb,rgb,alpha, red, green, blue |____parseColo ...

  5. linux下so动态库一些不为人知的秘密（上）

    linux 下有动态库和静态库,动态库以.so为扩展名,静态库以.a为扩展名.二者都使用广泛.本文主要讲动态库方面知识.        基本上每一个linux 程序都至少会有一个动态库,查看某个程序使 ...

  6. sed简单实例练习

    sedfile内容如下: Steve Blenheim:238-923-7366:95 Latham Lane, Easton, PA 83755:11/12/56:20300 Betty Boop: ...

  7. eclipse下的web开发问题总结[struts2文件上传]

    最近需要做一个web方面的文件上传的Demo.开发工具是eclipse[具体名称:Eclipse IDE for Java EE Developers 版本:2.0.0.20130613-0530]. ...

  8. iOS 各种传值方式

    属性传值 将A页面所拥有的信息通过属性传递到B页面使用 B页面定义了一个naviTitle属性,在A页面中直接通过属性赋值将A页面中的值传到B页面. A页面DetailViewController.h ...

  9. 【MFC学习笔记-作业6-sin图像】【OnDraw(CDC* pDC)】

    根据这段源代码 一步一步剖析CDC的使用 void CDrawSinXView::OnDraw(CDC* pDC) { CDrawSinXDoc* pDoc = GetDocument(); ASSE ...

  10. 13个mysql数据库的实用SQL小技巧

    此文章为转载 使用CASE来重新定义数值类型 SELECT id,title, (CASE date WHEN '0000-00-00' THEN '' ELSE date END) AS date ...