首页 > 其他 > 详细

offsetX、clientX、screenX、pageX、layerX

时间:2018-08-14 16:07:12      阅读:180      评论:0      收藏:0      [点我收藏+]

pageX/Y

相对于文档窗口左上角

技术分享图片

offsetX/Y

相对于触发事件元素的左上角,需要注意的是,offset是有负值的,如果你的元素有边框,那么offset会是负值。

(测试了IE11、Opera54.0.2952.71、Chrome68.0.3423.2、Firefox61.0.2中offset均不含边框的宽度)

技术分享图片

clientX/Y

相对于可视窗口左上角

技术分享图片

screenX/Y

相对于屏幕左上角

技术分享图片

技术分享图片

layerX/Y

相对于position为absolute或relative的父元素的左上角

技术分享图片

pageX/Y、clientX/Y

当可视窗口与文档窗口重叠,pageX等于clientX, pageY等于clientY。 但是如果缩小浏览器窗口直到浏览器出现滚动条。此时可视窗口左上角位置不变,但文档窗口左上角位置发生变化。

此时文档窗口的原点如图中红线所示在页面的上方。

技术分享图片

总体理解一下

技术分享图片

技术分享图片

 

offsetX、clientX、screenX、pageX、layerX

原文:https://www.cnblogs.com/huangcy/p/9475185.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!