screenX/clientX/pageX/layerX/offsetX/x

event的screenX/clientX/pageX/layerX/offsetX/x属性

参考网址1:http://www.jb51.net/article/22507.htm

参考网址2:http://www.cnblogs.com/xesam/archive/2011/12/08/2280509.html

根据参考网址

浏览器通用的属性是:screenX 以及 clientX(这里只讨论横坐标,纵坐标y是类似的)

pageX layerX firefox 专用属性,safari,chrome,opera都支持。

offsetXxIE的专用属性,safari和chrome也支持offsetX,他们和opera都支持x,但解释为clientX。


screenX: 事件发生位置与屏幕左边的距离;

clientX:   事件发生位置浏览器可视区域内容区的左上角的距离

pageX:    事件发生位置到html页面(元素html)的距离(与client不同的是,他与滚动条滚过的距离无关

layerX:  事件发生位置到 position 不为 static 的最近的父元素的border左上角的距离

offsetX: 事件发生位置到 最近的事件发生元素内容区左上角的距离

       x:      事件发生位置到 position 不为 static 的最近的父元素的border左上角的距离,是firefox 的 layerX的替换元素


实际上,由于参考网址写的内容有点久远,现代的浏览器有了很大的改变:

根据自己的测试

平台:firefox39,ie9, chrome43, opera30

变化:

1、ie9开始支持pageX属性了,解释与firefox相同

2、ie9也支持layerX属性了,但是它解释为 layerX+滚动条滚过的距离

3、ff39 (应该更早)开始支持offsetX属性了,解释与ie相同,但是仍然不支持x属性,意思是x属性会undefined。


chrome,Safari,opera都开始支持所有的属性,大部分解释也专有属性相同,对于layerX和x这对可替换元素,他们把layer解释为firefox的解释,x解释为clientX。





  • 0
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值