当前位置: 首页 > 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;员工只需要…...

[特殊字符] 智能合约中的数据是如何在区块链中保持一致的?

&#x1f9e0; 智能合约中的数据是如何在区块链中保持一致的&#xff1f; 为什么所有区块链节点都能得出相同结果&#xff1f;合约调用这么复杂&#xff0c;状态真能保持一致吗&#xff1f;本篇带你从底层视角理解“状态一致性”的真相。 一、智能合约的数据存储在哪里&#xf…...

练习(含atoi的模拟实现,自定义类型等练习)

一、结构体大小的计算及位段 &#xff08;结构体大小计算及位段 详解请看&#xff1a;自定义类型&#xff1a;结构体进阶-CSDN博客&#xff09; 1.在32位系统环境&#xff0c;编译选项为4字节对齐&#xff0c;那么sizeof(A)和sizeof(B)是多少&#xff1f; #pragma pack(4)st…...

Python实现prophet 理论及参数优化

文章目录 Prophet理论及模型参数介绍Python代码完整实现prophet 添加外部数据进行模型优化 之前初步学习prophet的时候&#xff0c;写过一篇简单实现&#xff0c;后期随着对该模型的深入研究&#xff0c;本次记录涉及到prophet 的公式以及参数调优&#xff0c;从公式可以更直观…...

鸿蒙中用HarmonyOS SDK应用服务 HarmonyOS5开发一个医院查看报告小程序

一、开发环境准备 ​​工具安装​​&#xff1a; 下载安装DevEco Studio 4.0&#xff08;支持HarmonyOS 5&#xff09;配置HarmonyOS SDK 5.0确保Node.js版本≥14 ​​项目初始化​​&#xff1a; ohpm init harmony/hospital-report-app 二、核心功能模块实现 1. 报告列表…...

C++中string流知识详解和示例

一、概览与类体系 C 提供三种基于内存字符串的流&#xff0c;定义在 <sstream> 中&#xff1a; std::istringstream&#xff1a;输入流&#xff0c;从已有字符串中读取并解析。std::ostringstream&#xff1a;输出流&#xff0c;向内部缓冲区写入内容&#xff0c;最终取…...

工业自动化时代的精准装配革新:迁移科技3D视觉系统如何重塑机器人定位装配

AI3D视觉的工业赋能者 迁移科技成立于2017年&#xff0c;作为行业领先的3D工业相机及视觉系统供应商&#xff0c;累计完成数亿元融资。其核心技术覆盖硬件设计、算法优化及软件集成&#xff0c;通过稳定、易用、高回报的AI3D视觉系统&#xff0c;为汽车、新能源、金属制造等行…...

【Oracle】分区表

个人主页&#xff1a;Guiat 归属专栏&#xff1a;Oracle 文章目录 1. 分区表基础概述1.1 分区表的概念与优势1.2 分区类型概览1.3 分区表的工作原理 2. 范围分区 (RANGE Partitioning)2.1 基础范围分区2.1.1 按日期范围分区2.1.2 按数值范围分区 2.2 间隔分区 (INTERVAL Partit…...

优选算法第十二讲:队列 + 宽搜 优先级队列

优选算法第十二讲&#xff1a;队列 宽搜 && 优先级队列 1.N叉树的层序遍历2.二叉树的锯齿型层序遍历3.二叉树最大宽度4.在每个树行中找最大值5.优先级队列 -- 最后一块石头的重量6.数据流中的第K大元素7.前K个高频单词8.数据流的中位数 1.N叉树的层序遍历 2.二叉树的锯…...

Java线上CPU飙高问题排查全指南

一、引言 在Java应用的线上运行环境中&#xff0c;CPU飙高是一个常见且棘手的性能问题。当系统出现CPU飙高时&#xff0c;通常会导致应用响应缓慢&#xff0c;甚至服务不可用&#xff0c;严重影响用户体验和业务运行。因此&#xff0c;掌握一套科学有效的CPU飙高问题排查方法&…...

LangChain知识库管理后端接口:数据库操作详解—— 构建本地知识库系统的基础《二》

这段 Python 代码是一个完整的 知识库数据库操作模块&#xff0c;用于对本地知识库系统中的知识库进行增删改查&#xff08;CRUD&#xff09;操作。它基于 SQLAlchemy ORM 框架 和一个自定义的装饰器 with_session 实现数据库会话管理。 &#x1f4d8; 一、整体功能概述 该模块…...