clientX, clientY | offsetX, offsetY | pageX, pageY的区别：

最新推荐文章于 2023-11-19 21:45:31 发布
最新推荐文章于 2023-11-19 21:45:31 发布
阅读量1.1k 收藏 2
点赞数 2
分类专栏： web前端开发 文章标签： javascript 前端 开发语言
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/a1598452168YY/article/details/127441341
版权

clientX, clientY | offsetX, offsetY | pageX, pageY的区别：

✍ clientX, clientY：指的是鼠标点击位置距离可视窗口的坐标；

图示：在不拉滚动条的情况下

 在拉滚动条的情况下： 还是点击位置距离可视窗口左上角的距离

 

✍ pageX, pageY：指的是距离页面左上角的距离，就是当你拉滚动条时，距离值也不变

图示：当你没拉滚动条时，此时点击页面左上角也就是窗口的左上角，所以当你没拉滚动条，距离就是下面图的距离；但是当你拉了滚动条，页面也就上去了，此时页面左上角不等于窗口左上角，而这个pageX, pageY是距离页面左上角的距离，当你点击同一个位置，这个坐标是不变的。

 

 ✍ offsetX, offsetY：距离触发元素左上角的坐标值

图示：

陌一一
关注
  • 2
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
[转]分析x,offsetX clientX screenX,pageX,y,offsetY clientY screenY,pageY之间的区别
03-17
在JavaScript中，处理鼠标事件时，经常会遇到一系列与鼠标位置相关的属性，如`x`, `offsetX`, `clientX`, `screenX`, `pageX`, `y`, `offsetY`, `clientY`, `screenY`, `pageY`等。这些属性在不同的上下文下提供了...
鼠标事件clientX、clientY
04-21
clientX、clientY、pageX、pageY、screenX、screenY、offsetX、offsetY
鼠标位置的获取pageX，pageY，screenX，screenY，clientX，和clientY，offsetX ，offsetY，layerX，layerY的使用 和 区别
manba
03-31 1万+
pageX，pageY，screenX，screenY，clientX，和clientY返回一个数，其指示物理“CSS像素”的数量的点是从参考点。事件点是用户单击的位置，参考点是左上角的一个点。这些属性返回该参考点的水平和垂直距离。 1、pageX和pageY： 相对于浏览器中完全呈现内容区域的左上角。此参考点位于左上角的URL栏和后退按钮下方。这一点可以在浏览器窗口中的任何位置， 并且如果在...
js计算滚轮滚动到导航组件时吸顶
qq_41411324的博客
02-03 322
页面： 吸顶方法：
JS之clientX,clientY,screenX,screenY,offsetX,offsetY区别测试
热门推荐
每天进步一点点
05-09 6万+
首先需要知道clientX,clientY,screenX,screenY,offsetX,offsetY 是鼠标事件对象下的几个属性， 之前也一直对这些属性搞的稀里糊涂，看文档上说的也是不太理解，反正看完一头雾水，所以自己动手亲自测试了一下；说一下自己的理解； clientX,clientY,screenX,screenY,offsetX,offsetY 这几个属性是“鼠标事件对象”下的属性
JavaScript 中一些概念理解 ：clientX、clientY、offsetX、offsetY、screenX、screenY
甜心的专栏
11-11 7037
clientX：设置或获取鼠标指针位置相对于窗口客户区域的 x 坐标，其中客户区域不包括窗口自身的控件和滚动条。 clientY： 设置或获取鼠标指针位置相对于窗口客户区域的 y 坐标，其中客户区域不包括窗口自身的控件和滚动条。 offsetX： 设置或获取鼠标指针位置相对于触发事件的（this）对象的 x 坐标。 offsetY ：设置或获取鼠标指针位置相对于触发事件的（this）对象的 y 坐标。 screenX： 设置或获取获取鼠标指针位置相对于用户屏幕的 x 坐标。 screenY： 设.
clientX、offsetX、screenX、pageX的区别
Serena_tz的博客
02-22 3261
一、概念总结 1、event.clientX、event.clientY 鼠标相对于浏览器窗口可视区域的X，Y坐标（窗口坐标），可视区域不包括工具栏和滚动条。IE事件和标准事件都定义了这2个属性.clientX指可视区域内离左侧的距离，以滚动条滚动到的位置为参考点。各个浏览器相同。即当有滚动条时clientX 小于 pageX。 2、event.pageX、event.pageY 类似于event.clientX、event.clientY，但它们使用的是文档坐标而非窗口坐标。这2个属性不是标准属性，但得到
clientX,clientY
m0_37715518的博客
04-28 414
JS中坐标表示方法的异同
03-17
- 在Internet Explorer中，`offsetX`和`offsetY`可以视为该浏览器下`pageX`和`pageY`的替代品。 #### 四、`screenX`与`screenY` **定义：** `screenX`和`screenY`表示鼠标相对于屏幕左上角的X轴和Y轴的位置。这里的...
整理的比较全的event对像在ie与firefox浏览器中的区别
01-19
FF：event.pageX和event.pageY。 通用：两者都有event.clientX和event.clientY属性。 鼠标当前坐标(加上滚动条滚过的距离) IE：event.offsetX和event.offsetY。 FF：event.layerX和event.layerY。 标签的x和y的坐标...
dom
03-31
会通过滚动而改变mouseEvent：（鼠标事件）[ ] offsetX，offsetY：事件属性返回触发事件时，鼠标相对于事件源元素的X，Y坐标，标准事件没有对应的属性clientX，clientY：事件属性返回当事件被触发时鼠标指针相对于...
Js中clientX/Y、offsetX/Y和screenX/Y之间区别
最新发布
lplovewjm的博客
11-19 567
本文主要通过讲解JavaScript中clientX、clientY、offsetX、offsetY、screenX、screenY之间的区别。
pageX/pageY、clientX/clientY、screenX/screenY的区别
cai_niao5623的博客
10-15 2317
在触发鼠标事件的时候会传一个event参数，在这个参数中我们可以获得pageX/pageY、clientX/clientY、screenX/screenY，但是这几个属性有啥区别呢？看下图 screenX/screenY：其实就是你的鼠标指针距离你电脑屏幕左侧边缘和上侧边缘的距离 clientX/clientY：其实就是你的鼠标指针距离当前网页最左侧和最上侧的距离(不包含滚动条的距离) pageX/pageY：其实就是你的鼠标指针距离当前网页最最侧和最上侧的距离(包含滚动条的距离) ...
正确使用pageX、pageY、offsetLeft、offsetTop
zheng_pika的博客
07-05 9365
获取鼠标位置的时候，遇到一点疑问，然后验证了一下自己的疑惑；pageX、pageY跟clientX和clientY类似，是相对于浏览器文档的坐标；offsetLeft、offsetTop获取的是固定定位，也就是说，监听某个选择器内的鼠标位置，这个方法返回的是这个固定范围的左上角离页面左上角的距离坐标；下面利用一个简单的div来演示一下div{ width: 100px; ...
图解offsetX、offsetY和clientX、clientY和pageX、pageY和screenX、screenY的区别
逆风优雅的博客
06-10 5194
offsetX、offsetY: 鼠标相对于事件源元素的X,Y坐标。比如说，我给黄色的盒子定义一个点击事件，则这个offset的坐标原点就在这个黄色盒子的左上角 clientX、clientY: 鼠标相对于浏览器窗口可视区域的X，Y坐标（窗口坐标），可视区域不包括工具栏和滚动条。 pageX、pagey: 事件发生时鼠标相对于整个页面的坐标。整个页面是说整个网页的区域。 pageX=clientX+横向滚动区域(如果有滚动条) pagey=clienty+纵向滚动区域(如果有滚动条) s...
一文吃透offsetX、offsetY、scrollTop、scrollY、scrollHeight、clientX、clientY、pageX、pageY以及类似属性的异同点
weixin_63383437的博客
11-17 2027
offsetX
css里dom宽度,2019-08-23 DOM中各种高度、宽度
weixin_42520025的博客
08-04 1147
1.引言对常见CSS x,y属性有大概了解，实际运用过程中发现很多概念模糊不清，对其进行学习。2.常见x,y属性概念1. e.clientX 是目标点距离浏览器可视范围的X轴坐标2. e.pageX 是目标点距离document最左上角的X轴坐标，即触发事件点相对于当前浏览器可视窗口左上角的横向距离，加上滚动条的滚动距离[没有滚动条时pageX=clientX,有滚动条时pageX=clientX...
clientX、pageX、screenX以及offsetX区别
weixin_42178670的博客
10-29 1541
clientX：鼠标相对于浏览器窗口可视区域x方向坐标clientY：鼠标相对于浏览器窗口可视区域y方向坐标。
pageX、clientX等的区别
我的blog屋
05-26 1万+
鼠标事件 鼠标事件有下面这几种： 1. onclick 鼠标点击事件 box.onclick = function(e){ console.log(e) } 2. onmousedown 鼠标按下事件 box.onmousedown = function(e){ cons...
微信开发者工具 touches属性的pageX: 86, pageY: 177.75, clientX: 86, clientY: 177.75分别是什么意思？
06-13
这些属性是指触摸点的坐标信息，具体解释如下： - `pageX` 和 `pageY`：触摸点相对于文档页面左上角的坐标。 - `clientX` 和 `clientY`：触摸点相对于浏览器窗口左上角的坐标。 一般来说，`pageX/Y` 和 `clientX/Y` 的值是相同的，除非页面发生了滚动，此时 `pageX/Y` 的值会随着滚动而改变。这些属性在处理触摸事件时非常有用，可以让开发者获取触摸点的精确位置，以便进行相关的操作。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

陌一一

你的鼓励是我最大的动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值