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坐标。

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

function GetMousePosStr (evnt,ele)

{

    if(!evnt)

    {

        evnt = window.event;

    }

    var offsetX = evnt.offsetX ? evnt.offsetX : evnt.layerX;

    if(evnt.offsetX < ele.offsetWidth / 2)

    {

        return 'left';

    }

    else

    {

        return 'right';

    }

}

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

转载一篇文章：

参考：

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代码：

// 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);

}

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

<!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>

<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')" >点俺拖拽</p>  

<p>1111111111111111111111</p>

<p>111111111111111</p>

<p>1111111111</p></div>  

<p style="height:900px;">测试</p>

</body>

</html>

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

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){}

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. win32程序调试OutputDebugString 类似printf格式化输出

    有没有win32编程因为打印变量调试程序而头疼呢.方法二的函数完全类似printf.非常完美.方法一:不带参数输出如printf("hello world"); OutputDeb ...

  2. python基础教程第6章——抽象

    1.函数的定义,使用def(或“函数定义”)语句: def hello(name): return ‘Hello.'+name+'!' def fibs(num): result=[0,1] for ...

  3. NFC扫描

    目录(?)[-] 简介 什么是NFC 标签和读取器 标签 读取器 NFC模式 通信模式 主动模式 被动模式 操作模式 读写 点对点 模拟卡片 NFC用例 用于启动服务 用于分享 用于连接设备 用于买票 ...

  4. Chapter 11. Frame, MainWindow, and Toplevel Widgets 框架,主窗体,顶级部件

    Chapter 11. Frame, MainWindow, and Toplevel Widgets   框架,主窗体,顶级部件 框架和Toplevels 都是设计用于其他部件的容器. 它们的不同在 ...

  5. uva 10026 Shoemaker's Problem _贪心

    题意:鞋匠现在有n个工作要做,每个工作要x天,没延迟一天需要付款y,鞋匠每天只能做一个工作,问使得鞋匠最少赔款的工作顺序. 思路:工作和工作之间排序,如果a.value*b.day>b.valu ...

  6. x/nfu－用gdb查看内存

    用gdb查看内存 2007-12-08 12:43 用gdb查看内存 格式: x /nfu <addr> 说明x 是 examine 的缩写 n表示要显示的内存单元的个数 f表示显示方式, ...

  7. C#中MessageBox用法总结

    我们在程序中经常会用到MessageBox. MessageBox.Show()共有21中重载方法.现将其常见用法总结如下: 1.MessageBox.Show("Hello~~~~&quo ...

  8. OC中NSString 的常用方法

    NSString *str1 = @"BeiJing"; NSString *str2 = @"beijing"; //全部转为大写 NSLog(@" ...

  9. JavaScript 【跨浏览器处理XML，做个兼容】

    //兼容方法        function getXMLDOM(xmlStr) {            var xmlDom = null;            if (typeof windo ...

  10. 使用springMVC时无法加载CSS和JS文件

    解决办法:在spring配置文件里加上  <mvc:default-servlet-handler/>