什么?你还不知道offsetX、offsetY和clientX、clientY和pageX、pageY和screenX、screenY的区别，进来唠唠

article/2025/11/8 22:33:51

在这里插入图片描述

offsetX、offsetY: 鼠标相对于事件源元素的X,Y坐标。比如说，给黄色的盒子定义一个点击事件，则这个offset的坐标原点就在这个黄色盒子的左上角，offsetX、offsetY就是相对于这个盒子的x、y坐标

clientX、clientY: 鼠标相对于浏览器窗口可视区域的X，Y坐标（窗口坐标），可视区域不包括工具栏和滚动条。

pageX、pagey: 事件发生时鼠标相对于整个页面的坐标。整个页面是说整个网页的区域。

pageX = clientX + 横向滚动区域(如果有滚动条)

pagey = clienty + 纵向滚动区域(如果有滚动条)

screenX、screenY: 鼠标相对于用户显示器屏幕左上角的X,Y坐标


http://chatgpt.dhexx.cn/article/o02da4i8.shtml

相关文章

event对象的offsetX, clientX, pageX, screenX

event对象的offsetX, clientX, pageX, screenX

现在需要对event对象的几大与坐标有关的属性做一个总结，以便于认识 offsetX|offsetY offsetX/Y获取到是触发点相对被触发dom的左上角距离(包括padding在内，不包括border)，不过左上角基准点在不同浏览器中有区别，以内容区左上角为基…
阅读更多...
vue拖拽指令之offsetX、clientX、pageX、screenX

vue拖拽指令之offsetX、clientX、pageX、screenX

自己一直很想做个拖拽生成静态页面的东西，说简单也简单，这个东西按道理用jsx语法是最好的，用render方法渲染生成的json。只是自己对这块还是没信心。今天写个vue的拖拽指令，顺便理一下offsetX、pageX、clientX、screenX这几个属性…
阅读更多...
鼠标事件offsetX会传递给子元素

鼠标事件offsetX会传递给子元素

鼠标事件offsetX会传递给子元素 本来是想要通过e.offset来创建XY轴二维坐标系的，当事实上很难办到，所以我改用了通过div.offsetWidth（元素宽度包括border）、div.offsetLeft（元素距整个网页左边缘的长度）、e…
阅读更多...
类似淘宝商品放大镜功能，以及offsetX、offsetY造成的鼠标移动时阴影部分会一闪一闪的不断回到左上角问题

类似淘宝商品放大镜功能，以及offsetX、offsetY造成的鼠标移动时阴影部分会一闪一闪的不断回到左上角问题

效果：效果是当鼠标移入的时候小图出现一小块是以鼠标为中心的遮罩层，鼠标在小图移动时大图放大显示遮罩层所在的局部，且遮罩层不能超出小图位置。如下图所示： html部分 从代码可知大图和小图是分别两个img标签图片其实也是一样…
阅读更多...
event.offsetX event.pageX event.clientX 和 obj.offsetLeft学习笔记

event.offsetX event.pageX event.clientX 和 obj.offsetLeft学习笔记

一、问题描述 工作中，需要在航拍图中 添加摄像头在航拍图中的位置，因此，需要开发一个功能：鼠标点击航拍图（背景），显示鼠标点击位置在页面中的位置（pageX和pageY）,然后将…
阅读更多...
html什么代码确定x坐标,HTML MouseEvent offsetX用法及代码示例

html什么代码确定x坐标,HTML MouseEvent offsetX用法及代码示例

MouseEvent offsetX属性是一个只读属性，用于返回鼠标指针相对于目标元素的x坐标。 用法: event.offsetX 返回值：它返回一个数字，该数字表示鼠标指针的水平坐标，以像素为单位。 以下示例程序旨在说明MouseEvent offsetX属性&#x…
阅读更多...
写轮播图时，关于offsetX和pageX的选择以及一些坑

写轮播图时，关于offsetX和pageX的选择以及一些坑

一、不要使用offsetX 前几天在公司实习，由于使用了swiper来做c端的滑动效果，在自定义的过程中，出现了一系列的坑，我看了源码，看了文档，也还是没有很好的理解，这个swiper的标准操作流程&#xff…
阅读更多...
js e.offsetX 和 e.offsetY

js e.offsetX 和 e.offsetY

本人自己在写代码的过程中&#xff0c;一直对e.offsetX 与 e.offsetY 分不清&#xff0c;今天好好探究一下e.offsetX 与 e.offsetY e.offsetX 与 e.offsetY 下相对与事件源的距离&#xff0c;也就是距离e.target的距离&#xff0c; 大家看下面例子,给出几张截图。 <!DOCTY…
阅读更多...
html5 offsetx,原生HTML5关于Div对象的.clientLeft、.offsetLeft、.clientX、.offsetX区分

html5 offsetx,原生HTML5关于Div对象的.clientLeft、.offsetLeft、.clientX、.offsetX区分

本篇主要介绍clientLeft、offsetLeft、clientX、offsetX这四种元素属性的区别&#xff0c;首先我们要理解清楚它们的概念&#xff1a; clientLeft&#xff1a;该元素对象的左边框宽度。 clientWidth&#xff1a;该元素对象的左内边框至右内边框的距离。 offsetLeft&#xff1a;…
阅读更多...
html5 offsetx,event对象中offsetX,clientX,pageX,screenX的区别

html5 offsetx,event对象中offsetX,clientX,pageX,screenX的区别

1、offsetX offset意为偏移量,是事件对象距左上角为参考原点的距离。以元素盒子模型的内容区域的左上角为参考点。不包括border。 2、clientX 事件对象相对于浏览器窗口可视区域的X,Y坐标(窗口坐标),可视区域不包括工具栏和滚动条 3、pageX 事件对象相对于整个文档的坐标以像素…
阅读更多...
彻底搞懂 offsetX、scrollX、clientX 的区别

彻底搞懂 offsetX、scrollX、clientX 的区别

无论在 iOS 还是前端开发中&#xff0c;关于如何定位一个元素是必须要掌握的知识&#xff0c;而在前端中&#xff0c;元素定位比较难理解&#xff0c;我们今天一起学习下。 在 DOM 设计中&#xff0c;主要通过这些 API 来确定某个元素的具体位置。 offsetTop, offsetLeft, offs…
阅读更多...
Java数组赋值时内存中的变化

Java数组赋值时内存中的变化

java中的方法区存放的是编译后的文件 xxx.class文件当创建数组对象时&#xff0c;数组对象会存放在堆里面&#xff0c;数据也存在于堆。当给数组赋值时&#xff0c;方法会进栈&#xff0c;然后拿着数组的地址去堆里面寻找数据并赋值
阅读更多...
Java数组：用fill()方法给数组赋值

Java数组：用fill()方法给数组赋值

Arrays类可以在指定位置进行数值填充&#xff0c;但是只能使用同一个数值进行填充&#xff1a; Arrays.fill(Object[] a,Object value);a表示数组&#xff0c;value表示填充的值 例1 public static void main(String[] args) {int[] a new int[6];//声明创建一个数组System.o…
阅读更多...
Java数组练习--数组随机赋值

Java数组练习--数组随机赋值

随机数生成&#xff1a;使用Math.random()方法&#xff0c;即&#xff1a; [ 0 , 1 ) → [ 0 , 1 ) 30 → [0 ,30) [0 ,30) 1 → [1,31) 取整后范围是[1,30] 此题目要点是&#xff0c;赋值之后的数组元素&#xff0c;要与之前赋值元素的值比较&#xff…
阅读更多...
java 数组的创建 与 赋值

java 数组的创建 与 赋值

1.2.2 数组类型 基本类型的数组有3种赋值形式&#xff0c;如下所示&#xff1a; 第1种和第2种都是预先知道数组的内容&#xff0c;而第3种是先分配长度&#xff0c; 然后再给每个元素赋值。第3种形式中&#xff0c;即使没有给每个元素赋值&#xff0c;每个元素也都有一个默认值…
阅读更多...
java 数组批量赋值_「数组赋值」java编程-定义数组并赋值 - seo实验室

java 数组批量赋值_「数组赋值」java编程-定义数组并赋值 - seo实验室

数组赋值 package day03; public class TestArray { public static void main(String [] args) { int [] b; b new int[] {88,99,66}; //分步定义数组&#xff0c;先定义数组名&#xff0c;然后再为数组赋值 int [] d {88,99,100}; //直接定义数组&#xff0c;同时赋值 Syste…
阅读更多...
java数组循环动态赋值_Java数组

java数组循环动态赋值_Java数组

Java语言数组遍历教程 Java语言数组遍历详解 语法 for(int i = 0;i< 数组名称.length;i++){数组名称[i]; } 说明 我们在程序中，定义了一个变量 i，用 i 的值和数组的长度值比较，因为数组的索引是从 0 开始的，所以我们遍历的数值只能够小于 数组名称.length。 数组存储的结…
阅读更多...
Java数组的赋值机制

Java数组的赋值机制

数组的两种赋值的方式 引用传递&#xff0c;赋的是地址 数组的值是放在JVM的堆里&#xff0c;当定义一个数组时会在JVM里的栈中&#xff0c;放置堆的地址&#xff0c;来指向JVM对应的 堆 。在对数组进行赋值的时候&#xff0c;默认情况下是引用传递&#xff0c;即把堆的地址给…
阅读更多...
Java二维数组赋值

Java二维数组赋值

Java二维数组是指由多个一维数组组成的数组结构。它可以看作是一个表格&#xff0c;其中行表示数组中的第一个维度&#xff0c;列表示第二个维度。 可以使用两个方括号&#xff08;[ ] [ ]&#xff09;来声明和访问Java二维数组中的元素。 例如&#xff0c;以下代码声明了一个包…
阅读更多...
java数组赋值_java中给数组赋值的方法

java数组赋值_java中给数组赋值的方法

1、数组操作中&#xff0c;可以使用等于()赋值 注意&#xff1a;此时新数组只是指向原数组的存储空间&#xff0c;并没有重新申请新的空间。 实例&#xff1a;public class ArrayTest{ public static void main(String args[]){ // 1 int[] anew int[4]; a[0]1; a[1]2; a[2]3; …
阅读更多...
推荐文章

Copyright @ 2022~2023