当前位置: 首页 > news >正文

[js] 图解 event.pageX event.clientX event.offsetX getBoundingClientRect

event.clientX、event.clientY
鼠标相对于浏览器窗口可视区域的X,Y坐标(窗口坐标),可视区域不包括工具栏和滚动条。IE事件和标准事件都定义了这2个属性
event.pageX、event.pageY
类似于event.clientX、event.clientY,但它们使用的是文档坐标而非窗口坐标。这2个属性不是标准属性,但得到了广泛支持。IE事件中没有这2个属性。
event.offsetX、event.offsetY
鼠标相对于事件源元素(srcElement)的X,Y坐标,只有IE事件有这2个属性,标准事件没有对应的属性。
event.screenX、event.screenY
鼠标相对于用户显示器屏幕左上角的X,Y坐标。标准事件和IE事件都定义了这2个属性
getBoundingClientRect
getBoundingClientRect用于获取某个元素相对于视窗的位置集合。集合中有top, right, bottom, left等属性;

在这里插入图片描述


参考:

图解 event.pageX event.clientX event.offsetX get BoundingClientRect

相关文章:

[js] 图解 event.pageX event.clientX event.offsetX getBoundingClientRect

event.clientX、event.clientY 鼠标相对于浏览器窗口可视区域的X,Y坐标(窗口坐标),可视区域不包括工具栏和滚动条。IE事件和标准事件都定义了这2个属性 event.pageX、event.pageY 类似于event.clientX、event.clientY,…...

VsCode备忘

上次简单学习了一下vscode的使用,结果好长时间没用,今天打开又全忘了。。。再记录一下吧 快捷键 CtrlShiftP 命令面板,查找命令,设置等等 Ctrl 打开集成终端,监视生成输出 Ctrl, 打开设置 CtrlP 转到文件,使用转到符…...

Linux命令200例:Yum强大的包管理工具使用(常用)

🏆作者简介,黑夜开发者,CSDN领军人物,全栈领域优质创作者✌。CSDN专家博主,阿里云社区专家博主,2023年6月csdn上海赛道top4。 🏆数年电商行业从业经验,历任核心研发工程师&#xff0…...

使用 Linux 相关知识部署博客系统

目录 ​编辑一、认识 Linux 二、如何拥有 Linux 环境 三、常见的 Linux 命令 1、目录相关命令 (1)ls (2)pwd (3)cd 2、文件操作相关命令 (1)touch (2&#xf…...

Linux--进程--vfork与fork区别

vfork&#xff1a; 所需头文件&#xff1a;#include <sys/types.h> #include <unistd.h> pid_t vfork(void); 功能&#xff1a; vfork() 函数和 fork() 函数一样都是在已有的进程中创建一个新的进程&#xff0c;但它们创建的子进程是有区别的。 参数&#xff…...

Ubuntu系统重装nvidia gpu驱动

1. 卸载原驱动 sudo apt remove *cuda* sudo apt remove *nvidia* sudo /usr/bin/nvidia-uninstall sudo dpkg -l | grep ^rc | cut -d -f3 | sudo xargs dpkg --purge sudo rm -rf ~/.cuda-license-* sudo apt purge nvidia-cuda-toolkit sudo apt remove nvidia-driver-* s…...

Java + Selenium + Appium自动化测试

一、启动测试机或者Android模拟器&#xff08;Genymotion俗称世界上最快的模拟器&#xff0c;可自行百度安装&#xff09; 二、启动Appium&#xff08;Appium环境安装可自行百度&#xff09; 三、安装应用到Genymotion上&#xff0c;如下图我安装一个计算机的小应用&#xff…...

【sgLazyCascader】自定义组件:基于el-cascader的懒加载级联菜单,支持异步加载子级菜单

sgLazyCascader源码 <template><div :class"$options.name"><el-cascader :props"props" v-model"model" :placeholder"placeholder || 请选择" :options"options"></el-cascader></div> &l…...

2023高教社杯数学建模E题思路模型 - 黄河水沙监测数据分析

# 1 赛题 E 题 黄河水沙监测数据分析 黄河是中华民族的母亲河。研究黄河水沙通量的变化规律对沿黄流域的环境治理、气候变 化和人民生活的影响&#xff0c; 以及对优化黄河流域水资源分配、协调人地关系、调水调沙、防洪减灾 等方面都具有重要的理论指导意义。 附件 1 给出了位…...

一、Linux下常用的压缩格式

一、Linux下常用的压缩格式 ​ Linux下常用的压缩扩展名有&#xff1a;.tar、.tar.bz2、.tar.gz。 二、Windows下7ZIP软件的安装 ​ 因为Linux下很多文件是.bz2&#xff0c;.gz结尾的压缩文件&#xff0c;因此需要在windows下安装7ZIP软件。 三、gzip压缩工具 .gzip工具负…...

MySQL 查询 - 排除某些字段的SQL查询,提升查询性能

序言 某些时候&#xff0c;需要查询拥有很多很多字段的表&#xff0c;但是查询表时&#xff0c;其中有一些不需要查询的字段&#xff0c;会增加查询的负担&#xff0c;所以这时候&#xff0c;就需要排除这些冗余的字段&#xff0c;指定需要的字段查询&#xff0c;提升查询性能…...

国产信创服务器如何进行安全可靠的文件传输?

信创&#xff0c;即信息技术应用创新&#xff0c;2018年以来&#xff0c;受“华为、中兴事件”影响&#xff0c;国家将信创产业纳入国家战略&#xff0c;并提出了“28n”发展体系。从产业链角度&#xff0c;信创产业生态体系较为庞大&#xff0c;主要包括基础硬件、基础软件、应…...

ARTS第五周:S - 数据编织 Data fabric

Brife ​数据编织/数据经纬&#xff08;Data Fabric&#xff09;是一种新型的数据管理和治理方法&#xff0c;旨在连接和整合所有数据源和数据目标&#xff0c;实现数据的无缝移动和访问。它是一种跨平台、跨云、跨技术的解决方案&#xff0c;可以连接各种类型的数据&#xff0…...

基于ArcGIS、ENVI、InVEST、FRAGSTATS等多技术融合提升环境、生态、水文、土地、土壤、农业、大气等领域的数据分析能力与项目科研水平教程

详情点击链接&#xff1a;基于ArcGIS、ENVI、InVEST、FRAGSTATS等多技术融合提升环境、生态、水文、土地、土壤、农业、大气等领域的数据分析能力与项目科研水平教程 一&#xff0c;空间数据获取与制图 1.1 软件安装与应用 1.2 空间数据 1.3海量空间数据下载 1.4 ArcGIS软件…...

Spring Boot 介绍

Spring Framework的发展和Spring Boot Spring 3 支持Java注解Spring 4 支持 Java 8, 同时推出Spring Boot Spring Boot 简化了Spring配置。Spring Boot是什么? Boot 翻译有靴子,启动的意思, 在计算机领域有引导的意思, 比如计算机启动引导或是Linux 的引导程序。 Spring B…...

mysql基于AES_ENCRYPTAES_DECRYPT实现密码的加密与解密

1.直接使用AES_ENCRYPT&&AES_DECRYPT函数导致的问题。 执行语句 select AES_ENCRYPT(cd123,key) 结果 加密过后的字符串是一串很奇怪的字符。 尝试使用上面加密过后的字符解密。 select AES_DECRYPT(u5£d|#,key) 结果 并未成功的解密 2.解决办法 使用 hex(…...

怎么把pdf转换成jpg图片?

怎么把pdf转换成jpg图片&#xff1f;在工作中&#xff0c;如果我们收到无法修改编辑的PDF文件&#xff0c;可能会遇到一些困难。尤其是当平台或网站只支持JPG图片格式&#xff0c;而领导又要求我们将pdf文件改为JPG格式时&#xff0c;情况就更为棘手了。这对于我们打工一族来说…...

计算机脚本的概念,如何编写、使用脚本 (Script)?

一、脚本的概念和使用场景 在计算机领域的脚本&#xff0c;指的是使用一种特定的描述性语言&#xff0c;依据一定的格式编写的可执行文件脚本语言又被称为扩建的语言或者动态语言, 是一种编程语言, 用来控制软件应用程序, 脚本通常是以文本 (ASCⅡ) 保存, 只是在被调用时进行解…...

c语言 5.0

&#x1f482; 个人主页: 程序员爱摸鱼&#x1f91f; 版权: 本文由【程序员爱摸鱼】原创、在CSDN首发、需要转载请联系博主&#x1f4ac; 如果文章对你有帮助、欢迎关注点赞收藏(一键三连)哦&#x1f485; 想寻找共同成长的小伙伴&#xff0c;可以互粉哦 &#x1f4ac;文章目录…...

如何配置远程访问以在外部网络中使用公司内部的OA办公系统——“cpolar内网穿透”

文章目录 前言1. 确认在内网下能够使用IP端口号登录OA办公系统2. 安装cpolar内网穿透3. 创建隧道映射内网OA系统服务端口4. 实现外网访问公司内网OA系统总结 前言 现在大部分公司都会在公司内网搭建使用自己的办公管理系统&#xff0c;如OA、ERP、金蝶等&#xff0c;员工只需要…...

解决Word中MathType功能失效的VBA与注册表修复指南

1. 遇到MathType罢工&#xff1f;先别急着重装Office 最近帮同事处理Word文档时&#xff0c;发现他的MathType菜单全灰了&#xff0c;公式编辑功能完全瘫痪。这种情况在科研论文写作高峰期特别要命——你正赶着投稿 deadline&#xff0c;突然发现公式编辑器失灵了&#xff0c;…...

RestTemplate遇到非RESTful接口怎么办?3种表单参数处理方案对比

RestTemplate应对非RESTful接口的实战指南 在现实开发中&#xff0c;我们常常会遇到各种不符合RESTful规范的接口设计。这些接口可能采用传统的表单传参方式&#xff0c;或是混合了路径参数与查询参数的"四不像"设计。本文将深入探讨三种高效处理这类非标准接口的方案…...

强化学习实战:用Python手把手实现值迭代与策略迭代算法(附完整代码)

强化学习实战&#xff1a;用Python手把手实现值迭代与策略迭代算法&#xff08;附完整代码&#xff09; 强化学习作为机器学习的重要分支&#xff0c;近年来在游戏AI、自动驾驶、机器人控制等领域展现出惊人潜力。对于初学者而言&#xff0c;理解算法原理固然重要&#xff0c;但…...

不止是缓存:深入Quartus FIFO IP核,玩转Show-ahead与Normal模式下的数据吞吐率优化

深入解析Quartus FIFO IP核&#xff1a;Show-ahead与Normal模式下的性能优化实战 在FPGA开发中&#xff0c;数据流处理系统的性能瓶颈往往出现在数据缓冲环节。作为Intel Quartus Prime工具链中的关键IP核&#xff0c;FIFO&#xff08;First In First Out&#xff09;缓冲器的…...

Qwen3.5-4B模型Matlab数据分析加速:模型调用与结果可视化

Qwen3.5-4B模型Matlab数据分析加速&#xff1a;模型调用与结果可视化 1. 引言&#xff1a;当科研遇上大模型 科研工作中最耗时的环节往往不是实验本身&#xff0c;而是数据处理和报告撰写。想象一下这样的场景&#xff1a;你刚完成一组复杂的实验&#xff0c;面对几十页的仪器…...

实战避坑:用Playwright+Selenium绕过电商网站验证码的3种方法(附Python代码)

实战避坑&#xff1a;用PlaywrightSelenium绕过电商网站验证码的3种方法&#xff08;附Python代码&#xff09; 电商平台的反爬虫机制日益复杂&#xff0c;验证码作为核心防线之一&#xff0c;已经从简单的图文识别升级到行为验证、智能风控等多维度拦截。本文将聚焦淘宝、京东…...

如何掌握Marzipano全景技术的5个核心技术?

如何掌握Marzipano全景技术的5个核心技术&#xff1f; 【免费下载链接】marzipano A 360 media viewer for the modern web. 项目地址: https://gitcode.com/gh_mirrors/ma/marzipano 探索现代Web全景图开发的奥秘&#xff0c;发现Marzipano如何通过等距柱状投影、立方体…...

bilibili-api完全指南:评论数据爬取的4个突破式解决方案

bilibili-api完全指南&#xff1a;评论数据爬取的4个突破式解决方案 【免费下载链接】bilibili-api 哔哩哔哩常用API调用。支持视频、番剧、用户、频道、音频等功能。原仓库地址&#xff1a;https://github.com/MoyuScript/bilibili-api 项目地址: https://gitcode.com/gh_mi…...

MAX32630FTHR平台RF95 LoRa精简移植实战

1. RadioHead库深度解析&#xff1a;面向MAX32630FTHR平台的RF95 LoRa通信精简移植 1.1 项目定位与工程价值 RadioHead并非官方标准协议栈&#xff0c;而是由Airspayce公司开发的一套轻量级、跨平台无线通信抽象库。其设计哲学强调“最小可行通信”——不追求协议完备性&#…...

GyroFlow:用陀螺仪数据重塑视频稳定技术

GyroFlow&#xff1a;用陀螺仪数据重塑视频稳定技术 【免费下载链接】gyroflow Video stabilization using gyroscope data 项目地址: https://gitcode.com/GitHub_Trending/gy/gyroflow 在数字影像创作领域&#xff0c;画面稳定性直接决定作品专业度。无论是运动相机拍…...