关闭

pageX,clientX,offsetX,layerX的区别

210人阅读 评论(0) 收藏 举报
分类:

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

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

一.PageX和clientX

PageX和clientX ,这个两个比较容易搞混,
PageX:鼠标在页面上的位置,从页面左上角开始,即是以页面为参考点,不随滑动条移动而变化
clientX:鼠标在页面上可视区域的位置,从浏览器可视区域左上角开始,即是以浏览器滑动条此刻的滑动到的位置为参考点,随滑动条移动 而变化.
真拗口,直接上图,

1
两个DIV接触点(黑点位置)
如果将浏览器Y轴方向缩小,出现了滑动条就可以分辨出两者的区别
2

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

可是悲剧的是,PageX只有FF特有,IE这个悲剧没有啊T_T,所以大牛们想出了一个办法
PageY=clientY+scrollTop-clientTop;(只讨论Y轴,X轴同理,下同)
页面上的位置=可视区域位置+页面滚动条切去高度-自身border高度,还是直接上图比较清楚

3

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

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

1
2
3
4
5
6
// 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);
}

二.screenX

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

三.offsetX和layerX

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

4

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

layerX:FF特有,鼠标相比较于当前坐标系的位置,即如果触发元素没有设置绝对定位或相对定位,以页面为参考点,如果有,将改变参考坐标系,从触发元素盒子模型的border区域的左上角为参考点
也就是当触发元素设置了相对或者绝对定位后,layerX和offsetX就幸福地生活在一起^-^,几乎相等,唯一不同就是一个从border为参考点,一个以内容为参考点

5

FF从border开始,

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

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

1
2
3
4
5
6
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标准.其他的,都纠结了.
最给力的是,chrome和safari一条龙通杀!完全支持所有属性.其中(offsetX和layerX都是以border为参考点)…

点此查看demo

0
0
查看评论

图解Js event对象offsetX, clientX, pageX, screenX, layerX, x区别

通过 2 张图和 1 张表格,轻松区别 Javascript Event 对象中的offsetX, clientX, pageX, screenX, layerX, x等属性。 不同浏览器对这些属性的支持:
  • lzding
  • lzding
  • 2015-05-02 09:42
  • 17503

pageX、clientX、screenX、offsetX、layerX、x 在不同浏览器上的使用及区别

chrome: e.pageX——相对整个页面的坐标 e.layerX——相对当前坐标系的border左上角开始的坐标 e.offsetX——相对当前坐标系的border左上角开始的坐标 e.clientX——相对可视区域的坐标 e.x——相对可视区域的坐标 ff: e.p...
  • MOONCOM
  • MOONCOM
  • 2016-10-31 16:18
  • 1441

js事件对象Event获取pageX,clientX,screenX,offsetX,layerX的方式与区别

pageX:鼠标在页面上的位置,从页面左上角开始,即是以页面为参考点,同一个元素坐标不随滑动条移动而变化clientX:鼠标在页面上可视区域的位置,即是以浏览器滑动条此刻的滑动到的位置为参考点,同一个元素坐标随滑动条移动而变化.注: 1、如果元素位于body中,e.clientX + docume...
  • javaloveiphone
  • javaloveiphone
  • 2016-03-22 16:28
  • 1862

javascript 中 x offsetX clientX screenX pageX的区别

在javascript的事件对象中的关于事件鼠标位置的几个属性(x, pageX, offsetX, scrrenX clientX)及(y, pageY, offsetY, screenY, clientY), 其中offsetX, offsetY是指相对于触发事件元素的左上角的偏移。但在不同的浏...
  • yang_chuanlong
  • yang_chuanlong
  • 2015-10-18 23:52
  • 4896

offsetX、clientX、pageX等位置的计算

1.常见的事件位置属性 e.pageX——相对整个页面的坐标 注意:IE6、IE7、IE8无该属性 e.layerX——相对当前坐标系的border左上角开始的坐标 注意:在opera、IE6、IE7、IE8中这个属性,而IE8以上表示相对当前坐标系的...
  • mafan121
  • mafan121
  • 2015-06-01 13:40
  • 1626

clientX,pageX,offsetX,layerX,screenX,offsetLeft区别分析

scrollHeight: 获取对象的滚动高度。 scrollLeft:设置或获取位于对象左边界和窗口中目前可见内容的最左端之间的距离 scrollTop:设置或获取位于对象最顶端和窗口中可见内容的最顶端之间的距离 scrollWidth:获取对象的滚动宽度 offsetHeight:获取对...
  • u013782203
  • u013782203
  • 2014-08-29 15:16
  • 540

各个浏览器中鼠标位置的属性 offsetX layerX PageX clientX (自由拖动框,防止文字选中)

参考: http://blog.csdn.net/crazy_fire/article/details/7721587 http://www.funnyhao.com/pagex-clientx-offsetx-layerx-of-those-things/ 1.offsetX和layerX off...
  • hdchangchang
  • hdchangchang
  • 2012-12-27 15:10
  • 7757

JS:clientX/Y、screenX/Y、pageX/Y、offsetX/Y、layerX/Y、x/y

Event对象 Event对象代表事件的状态,比如事件在其中发生的元素、键盘按键的状态、鼠标的位置、鼠标按钮的状态。 Event对象只在事件发生的过程中才有效。 浏览器兼容性 FF:没有window.event对象。可以通过给函数的参数传递event对象。
  • u010200222
  • u010200222
  • 2015-05-10 17:38
  • 777

offsetX, clientX, pageX, screenX, layerX,

通过 3 张图和 1 张表格,轻松区别 JavaScript Event 对象中的offsetX, clientX, pageX, screenX, layerX, x等属性。 一、测试代码如下: [html] view plain ...
  • gong1422425666
  • gong1422425666
  • 2017-06-12 16:29
  • 166

clientX、screenX、pageX、offsetX、layerX

e.pageX——参照点也是浏览器内容区域的左上角,但它不会随着滚动条而变动 e.layerX——鼠标位置相对当前坐标系的border左上角开始的坐标 e.offsetX——鼠标位置相对当前坐标系的border左上角开始的坐标 e.clientX——鼠标位置相对可视区域的坐标 e.scr...
  • web_hua
  • web_hua
  • 2017-10-15 19:24
  • 78
    个人资料
    • 访问:383414次
    • 积分:5269
    • 等级:
    • 排名:第6161名
    • 原创:42篇
    • 转载:723篇
    • 译文:0篇
    • 评论:14条
    最新评论