关于offsetX、layerX、clientX、screenX以及pageX-阿里云开发者社区

开发者社区> 开发与运维> 正文

关于offsetX、layerX、clientX、screenX以及pageX

简介: 事件(event)的位置区别

【转载请注明出处】:https://blog.csdn.net/huahao1989/article/details/107775411

我们都熟知,标题中的几个方法都是用来获取事件(event)的位置,但是他们有什么区别呢?就用一张图来说明
image.png

  • offsetX: 指事件发生位置相对触发元素左上角的水平坐标
  • layerX: FF特有,鼠标相比较于当前坐标系的位置,即从当前容器依次往上寻找设置绝对定位或相对定位的元素为参考坐标系,以该容器的左上角来计算水平坐标
  • clientX: 是指事件发生位置相对可视区域的水平坐标(只是document展现的部分,不包括搜索栏、书签栏等)
  • screenX: 是指事件发生位置相对电脑屏幕的水平坐标
  • pageX: 是指事件发生位置相对文档(document)的水平坐标(是指整个文档,当出现滚动条时,隐藏的部分也会被算入pageX)

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

分享:
开发与运维
使用钉钉扫一扫加入圈子
+ 订阅

集结各类场景实战经验,助你开发运维畅行无忧

其他文章