专栏首页服务端技术关于offsetX、layerX、clientX、screenX以及pageX
原创

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

【转载请注明出处】: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

原创声明,本文系作者授权云+社区发表,未经许可,不得转载。

如有侵权,请联系 yunjia_community@tencent.com 删除。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 接入层限流之OpenResty提供的Lua限流模块lua-resty-limit-traffic

    【转载请注明出处】:https://cloud.tencent.com/developer/article/1625480

    后端老鸟
  • Nginx状态监控及日志分析

    【转载请注明出处】:https://cloud.tencent.com/developer/article/1636526

    后端老鸟
  • 使用canal增量订阅MySQL binlog

    【转载请注明出处】:https://cloud.tencent.com/developer/article/1634327

    后端老鸟
  • Python代理设置

    py3study
  • RS Meet DL(72)-[谷歌]采样修正的双塔模型

    本文介绍的论文题目是:《Sampling-Bias-Corrected Neural Modeling for Large Corpus Item Recomm...

    石晓文
  • Android 工程师开发 iOS 是怎样的体验?

    Hello 各位朋友好久不见?,好久没有更新公众号了,为什么没有更新,是因为我最近一段时间都在写 iOS 应用,终于在前几天完成了自己的第一个 iOS 产品的开...

    Android丨Kotlin
  • 如何优雅的封装requests

    后面定义了get/options/head/post/put/patch/delete 6个函数。

    测试老树
  • Dubbo consumer消费端启动报错java.lang.RuntimeException: [source error] not available in a static method: h

    java.lang.RuntimeException: [source error] not available in a static method: han...

    MickyInvQ
  • 11个让你吃惊的Linux终端命令

    我已经用了十年的linux了,通过今天这篇文章我将向大家展示一系列的命令、工具和技巧,我希望一开始就有人告诉我这些,而不是曾在我成长道路上绊住我。 ? 1. 命...

    企鹅号小编
  • [Anaconda] command not found: conda

    参考文章:http://blog.csdn.net/u013581118/article/details/52081987

    努力在北京混出人样

扫码关注云+社区

领取腾讯云代金券