元素偏移小结——screenX/Y、pageX/pageY、clientX/clientY、offsetX/offsetY

最新推荐文章于 2024-03-18 17:57:56 发布
最新推荐文章于 2024-03-18 17:57:56 发布
阅读量513 收藏
点赞数
分类专栏： JavaScript 文章标签： js 定位
版权声明：本文为博主原创文章，遵循 CC 4.0 BY 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq846294282/article/details/105534654
版权

e.screenX、e.screenY: 鼠标位置相对于电脑屏幕左上角的偏移量。

e.pageX、e.pageY： 鼠标位置相对于页面左上角的偏移量

e.clientX、e.clientY: 鼠标位置相对于浏览器窗口左上角的偏移量（屏幕滚动时，这个左上角也会移动，所以适配屏幕滚动的时候应使用pageX/pageY）

e.offsetX、e.offsetY： 鼠标位置相对于当前元素左上角（不包含border）的偏移量

故：e.pageY = e.clientY + window.scrollY（页面偏移量 = 窗口偏移量 + 页面滚动距离）

Coder Ben
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
clientX、offsetX、screenX、pageX、x的区别
我的blog屋
05-30 850
QQ群招募中：646258285（招募中，没几个人说话）， 需要交流的朋友可以直接加我微信( DntBeliv )或QQ( 1121864253 ) 一、clientX、clientY 点击位置距离当前body可视区域的x，y坐标 二、pageX、pageY 对于整个页面来说，包括了被卷去的body部分的长度 三、screenX、screenY 点击位置距离当前电脑屏幕的x，y坐标 四、offsetX、offsetY 相对于带有定位的父盒子的x，y坐标 五、x、y 和screenX、screenY
元素偏移量offset系列及e.pageX(e.pageY)
katherin_wanzi的博客
07-14 1388
1.offset概述 注意：目标元素的父元素要有定位，否则偏移量为目标元素与元素之间的距离 2.offset与style的区别 3.e.pageX和e.pageY 目标元素在浏览器中的位置 案例 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initi
元素位置pageX,pageY,clientX,clientY,scrollX,scrollY,screenX,screenY,offsetX,offsetY
盏茶作酒的博客
09-23 1116
元素位置pageX,pageY,clientX,clientY,scrollX,scrollY,screenX,screenY,offsetX,offsetY event.pageX 设置或获取鼠标指针位置相对于当前窗口的 x 坐标，其中客户区域包括窗口自身的控件和滚动条。 event.pageY 设置或获取鼠标指针位置相对于当前窗口的 y 坐标，其中客户区域包括窗口自身的控件和滚动条。 d...
js鼠标事件中的clientX/clientY,screenX/screenY,pageX/pageY,offsetX/offsetY,layerX/layerY,x/y
linsk1998的博客
07-18 741
clientX/clientY,screenX/screenY 这两组是标准，一般用这两组，就没问题了 clientX/clientY 相对于目标可视区的坐标，不包括边框，不会随滚动条变化 screenX/screenY 位置相对于用户屏幕 ============================================================ 下面是其他
关于偏移量offset-x、offset-y的取值如何判断增减
08-31 6367
在设置偏移量的时候，我们可以非常清楚往哪个方向偏移，那么问题来了，offset-y和offset-x的值我要增加呢？还是减少呢？ 虽然不是什么技术活，但是忘了是不是需要自己试试呢？那么就是有点浪费时间了.......所以我自己画了个图，供大家参考 ...
e.pageX、e.clientX、e.screenX、e.offsetX的区别以及元素的一些CSS属性
weixin_59017683的博客
04-21 5419
网页点位获取
[转]分析x,offsetX clientX screenX,pageX,y,offsetY clientY screenY,pageY之间的区别
03-17
在JavaScript中，处理鼠标事件时，经常会遇到一系列与鼠标位置相关的属性，如`x`, `offsetX`, `clientX`, `screenX`, `pageX`, `y`, `offsetY`, `clientY`, `screenY`, `pageY`等。这些属性在不同的上下文下提供了...
如何获取鼠标位置，以及pageX/Y、screenX/Y、clientX/Y和offsetX/Y 的区别
小小前端
04-17 422
如何获取鼠标位置 当我们注册事件时，系统会自动给我们创建一个 事件对象 以参数的形式传递到函数内 我们可以先打印一下 事件对象event ,看看里面到底有什么 document.onclick = function(event){ console.log(event) } 那该用哪个，它们又有什么区别呢？ 属性 描述 offsetX / offsetY 相对于父盒子的...
鼠标事件之clientX(Y)、offsetX(Y)、screenX(Y)、pageX(Y)、x(y)的区别与使用详解
Janewenhui的博客
12-18 558
文章目录一、鼠标事件1. onclick2. onmousedown3. onmouseup4. onmousemove5. onmouseover6. onmouseout二、坐标1、clientX、clientY2、pageX、pageY3、screenX、screenY4、offsetX、offsetY5、x、y 一、鼠标事件 鼠标事件有下面这几种： 1. onclick 鼠标点击事件 box.onclick = function(e){ console.log(e) } 2. onmous
event对象的offsetX, clientX, pageX, screenX
hardly555的博客
11-01 883
现在需要对event对象的几大与坐标有关的属性做一个总结，以便于认识 offsetX|offsetY offsetX/Y获取到是触发点相对被触发dom的左上角距离(包括padding在内，不包括border)，不过左上角基准点在不同浏览器中有区别，以内容区左上角为基准点（不包括边框），如果触发点在边框border上会返回负值。 用途：待发现 clientX|clientY和pageX|pageY clientX|clientY这对坐标相对于窗口，从窗口的顶部/左侧边缘计算得出，类似于cs.
如何理解e.clientX和e.clientY e.screenX e.screenY
baidu_36681154的博客
09-01 1498
别人老是说e.clientX和e.clientY是可视区的坐标，后来我通过测试发现 e.clientX和e.clientY的坐标是你打开浏览器不是有一个方框吗？ 你可以用鼠标直接点到他的最左边看它是不是0，如果是则说明是鼠标点击的地方与浏览器左边的边界线的距离。 你再点击浏览器左上角你看是不是0,0如果是说明clientX与clientY就是鼠标点击的地方与浏览器左边，顶部的边界的距离。
事件坐标：screenX,clientX,pageX,offsetX的区别
qq_43654065的博客
01-04 783
e.screenX/e.screenY: 事件发生时鼠标相对于电脑屏幕的坐标。e.screenX,e.screenY的最大值不会超过屏幕分辨率。 e.clientX/e.clientY: 事件发生时鼠标在浏览器内容区域的坐标。 浏览器内容区域就是浏览器窗口中用来显示网页的可视区域，不包括滚动条和工具栏，也不随滚动条的移动而移动。 当浏览器窗口缩小时，e.clientX/e.clientY的最大值也会缩小。 e.pageX/e.pageY: 事件发生时鼠标相对于整个页面的坐标。整个页面是说整个网页的区域。
有趣且重要的JS知识合集（20）screen/client/scroll/offset等坐标属性知识点
最新发布
qq_39404437的博客
03-18 997
screen/client/scroll/offset等坐标属性知识点
e.pageX,e.pageY
丑娘娘不丑
07-11 1455
e.pageX,e.pageY表示鼠标在页面上的位置。
深入理解 e.clientX,e.clientY e.pageX e.pageY e.offsetX e.offsetY
juceli的博客
07-24 1164
event.clientX、event.clientY 鼠标相对于浏览器窗口可视区域的X，Y坐标（窗口坐标），可视区域不包括工具栏和滚动条。IE事件和标准事件都定义了这2个属性 event.pageX、event.pageY 类似于event.clientX、event.clientY，但它们使用的是文档坐标而非窗口坐标。这2个属性不是标准属性，但得到了广泛支持。IE事件中没有这2个属性。 ...
理解e.clientX、e.clientY、e.pageX、e.pageY、e.offsetX、e.offsetY、e.screenX、e.screenY
kehukehu_kehu的博客
06-09 850
e.clientX、e.clientY 鼠标相对于浏览器窗口可视区域的X，Y坐标（窗口坐标），可视区域不包括工具栏和滚动条。IE事件和标准事件都定义了这2个属性 e.pageX、e.pageY 类似于e.clientX、e.clientY，但它们使用的是文档坐标而非窗口坐标。这2个属性不是标准属性，但得到了广泛支持。IE事件中没有这2个属性。 e.offsetX、e.offsetY 鼠标
理解 e.clientX,e.clientY e.pageX e.pageY e.offsetX e.offsetY
agg7911的博客
07-09 316
理解 e.clientX,e.clientY e.pageX e.pageY e.offsetX e.offsetY event.clientX、event.clientY 鼠标相对于浏览器窗口可视区域的X，Y坐标（窗口坐标），可视区域不包括工具栏和滚动条。IE事件和标准事件都定义了这2个属性 event.pageX、event.pageY 类似于e...
jquery中clientY，pageY和screenY的区别 最后三张图一目了然。转载的
肖肖肖丽珠的博客
05-13 5426
jquery获取坐标     * {margin: 0;padding: 0;}     div p {         display: inline-block;box-sizing: border-box;     } 鼠标当前的屏幕坐标是：x:0,y:0 鼠标当前窗口客户区的坐标是：x2:0,y2:0 鼠标在窗口页面中的坐标是：x3:0,y3:
pageX offsetX screenX
07-27
这些是JavaScript中的一些属性，用于获取鼠标...- offsetX：鼠标事件相对于事件目标元素的水平坐标。 - screenX：鼠标事件相对于用户屏幕的水平坐标。 这些属性可以在处理鼠标事件时使用，以获取鼠标位置的相关信息。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

打赏作者

Coder Ben

你的鼓励将是我创作的最大动力

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

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

打赏作者

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

抵扣说明：

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

余额充值