前辈的文章:

写的小测试:

1. e.pageX 与 e.clientX 的区别

    
            
    
    
     
      view
     
    
     
      view_2
     
    
     
    
    

2. e.layerX 与 e.offsetX 的区别

    e.layerx -- 相对当前坐标系的border左上角开始的坐标

                    (>ie8  ie9下有特殊表现:相对当前坐标系的border左上角开始的坐标 + 滚动条滚过的距离)

    e.offsetX -- 相对当前坐标系的border左上角开始的坐标

    何为当前坐标系??

        参考文章:

        粘帖过来:^_^

ageX,clientX,offsetX,layerX的区别

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

John Resig大神说过,动态元素有3个至关重要的元素,位置,尺寸和可见性.所以,今天,先拿几个页面位置属性开刀.

一.PageX和clientX

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

很明显,红色参考块已经被滑动条截取部分,PageY不变,但是clientY已经变了

可是悲剧的是,PageX只有特有,IE这个悲剧没有啊T_T,所以大牛们想出了一个办法

很明显,模块交界处,scrollTop代表的是被浏览器滑动条滚过的长度,和clientY相加,刚好等于100,最后还要再减去一个clientTop,即是border-top的宽度

Jquery中的PageX的代码如下.十分精炼..

123456

// Calculate pageX/Y if missing and clientX/Y availableif ( 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);}

二.screenX

screenX:鼠标在屏幕上的位置,从屏幕左上角开始,这个没有任何争议,不讨论 ^_^

三.offsetX和layerX

接下来是offsetX和layerX

IE以内容区域开始,向上进入border将出现负值

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

FF从border开始,

x/y:IE特有,这个本来和layerX/layerY的作用基本一样,但是IE的当前坐标选择十分混乱,能不用就不用,不讨论

网上别人总结的关于这六个纠结的纠结表..

123456

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+

只有clientX和screenX 皆大欢喜是W3C标准.其他的,都纠结了.