关于offsetX、layerX、clientX、screenX

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

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

image.png

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

欢迎关注 “后端老鸟” 公众号，接下来会发一系列的专题文章，包括Java、Python、Linux、SpringBoot、SpringCloud、Dubbo、算法、技术团队的管理等，还有各种脑图和学习资料，NFC技术、搜索技术、爬虫技术、推荐技术、音视频互动直播等，只要有时间我就会整理分享，敬请期待，现成的笔记、脑图和学习资料如果大家有需求也可以公众号留言提前获取。由于本人在所有团队中基本都处于攻坚和探路的角色，搞过的东西多，遇到的坑多，解决的问题也很多，欢迎大家加公众号进群一起交流学习。

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

image