关于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)
相关文章
|
索引
antd a-table表格添加序号和分页总数——基础积累
antd a-table表格添加序号和分页总数——基础积累
1122 0
|
4月前
|
iOS开发
Cisco Catalyst 9800 Wireless Controller, IOS XE Release 17.17.1 ED - 思科无线控制器系统软件
Cisco Catalyst 9800 Wireless Controller, IOS XE Release 17.17.1 ED - 思科无线控制器系统软件
115 9
Cisco Catalyst 9800 Wireless Controller, IOS XE Release 17.17.1 ED - 思科无线控制器系统软件
|
前端开发 数据处理 API
后端开发:构建稳健与高效的服务器逻辑
后端开发:构建稳健与高效的服务器逻辑
|
8月前
|
Web App开发 编解码 vr&ar
使用Web浏览器访问UE应用的最佳实践
在3D/XR应用开发中,尤其是基于UE(虚幻引擎)开发的高精度场景,传统终端因硬件局限难以流畅运行高帧率、复杂效果的三维应用。实时云渲染技术,将渲染任务转移至云端服务器,降低终端硬件要求,确保用户获得流畅体验。具备弹性扩展、优化传输协议、跨平台支持和安全性等优势,适用于多种终端和场景,特别集成像素流送技术,帮助UE开发者实现低代码上云操作,简化部署流程,保留UE引擎的强大开发能力,确保画面精美且终端轻量化。
361 17
使用Web浏览器访问UE应用的最佳实践
|
9月前
|
供应链 安全 分布式数据库
探索区块链技术在供应链管理中的应用
【10月更文挑战第21天】 本文深入探讨了区块链技术如何在供应链管理中发挥关键作用,通过具体案例分析,揭示了区块链提高透明度、降低成本和增强安全性的潜力。文章首先概述了区块链技术的基本原理及其对传统供应链模式的挑战,接着详细讨论了区块链如何在不同供应链环节中实施,并分析了其带来的变革。最后,文章提出了企业在采纳区块链技术时可能面临的挑战和应对策略,为供应链管理者提供了宝贵的参考。
478 26
|
10月前
|
传感器 存储 物联网
在物联网(IoT)快速发展的今天,C语言作为物联网开发中的关键工具,以其高效、灵活、可移植的特点
在物联网(IoT)快速发展的今天,C语言作为物联网开发中的关键工具,以其高效、灵活、可移植的特点,广泛应用于嵌入式系统开发、通信协议实现及后端服务构建等领域,成为推动物联网技术进步的重要力量。
357 1
|
11月前
|
机器学习/深度学习 监控 搜索推荐
电商平台如何精准抓住你的心?揭秘大数据背后的神秘推荐系统!
【10月更文挑战第12天】在信息爆炸时代,数据驱动决策成为企业优化决策的关键方法。本文以某大型电商平台的商品推荐系统为例,介绍其通过收集用户行为数据,经过预处理、特征工程、模型选择与训练、评估优化及部署监控等步骤,实现个性化商品推荐,提升用户体验和销售额的过程。
490 1
|
运维 安全 Java
阿里云云效操作报错合集之遇到流水线报错,该如何排查
本合集将整理呈现用户在使用过程中遇到的报错及其对应的解决办法,包括但不限于账户权限设置错误、项目配置不正确、代码提交冲突、构建任务执行失败、测试环境异常、需求流转阻塞等问题。阿里云云效是一站式企业级研发协同和DevOps平台,为企业提供从需求规划、开发、测试、发布到运维、运营的全流程端到端服务和工具支撑,致力于提升企业的研发效能和创新能力。
echarts的xAxis和yAxis——x轴y轴以及网格线的详细配置
echarts的xAxis和yAxis——x轴y轴以及网格线的详细配置
4778 0
|
JavaScript UED
vue里使用虚拟列表处理element-ui的el-select选择器组件数据量大时卡顿问题
vue里使用虚拟列表处理element-ui的el-select选择器组件数据量大时卡顿问题
787 0
vue里使用虚拟列表处理element-ui的el-select选择器组件数据量大时卡顿问题

热门文章

最新文章