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都支持。
offsetX 和 x 是IE的专用属性,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。