JS 事件对象 offsetX/Y clientX Y PageX Y

最新推荐文章于 2024-09-25 18:15:20 发布
最新推荐文章于 2024-09-25 18:15:20 发布
阅读量111 收藏
点赞数
分类专栏： JS 文章标签： javascript 前端 html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/HandsomeDanielWu/article/details/126025218
版权
本文深入探讨了Web开发中关于元素位置的三个关键坐标系统——offsetXY, clientXY和PageXY。offsetXY提供元素相对于其offsetParent的偏移量，不考虑滚动；clientXY指示元素在视口内的坐标，不包括边框和滚动条；PageXY则表示元素在完整页面的坐标，包括滚动。了解这些坐标系统对于布局和交互设计至关重要。
摘要由CSDN通过智能技术生成

 

 

 offsetX Y

 clientX Y

PageX Y

 

 

 

 

 offsetX/Y，内部不要包含子标签

 

  br换行

 

 

 

 

HandsomeDanielWu
关注
专栏目录
JS-事件对象的一些属性（offsetXY、clientXY、pageXY）
DcTbnk的博客
04-02 536
1,标签的布尔属性 定义给标签的属性,属性值就是属性名称 H5标准中,布尔属性,不推荐写属性值 checked="" 或者 checked 在JavaScript中,通过 标签对象.属性 = true / false 的形式来定义布尔属性 2,标签对象,坐标的数据 offsetX offsetY 标签对象内容(边框线内),左上角 的坐标 clientX clientY ...
js事件对象Event，layerX与offsetX的区别
alize的博客
08-20 3507
offsetX： 获取到的是鼠标触发点相对于目标事件元素(被触发DOM)左上角的距离(确切的说是到边框外边界的距离)，其中在IE中以内容区左上角为基准点不包括边框，如果触发点在边框上会返回负值，而chrome中以边框左上角为基准点。 layerX： 获取到的是鼠标触发点相对于offsetParent元素左上角的距离(确切的说是到边框外边界的距离)，包括中间所有元素的padding、margin、b...
JavaScript 中一些概念理解 ：clientX、clientY、offsetX、offsetY、screenX、screenY
甜心的专栏
11-11 7174
clientX：设置或获取鼠标指针位置相对于窗口客户区域的 x 坐标，其中客户区域不包括窗口自身的控件和滚动条。 clientY： 设置或获取鼠标指针位置相对于窗口客户区域的 y 坐标，其中客户区域不包括窗口自身的控件和滚动条。 offsetX： 设置或获取鼠标指针位置相对于触发事件的（this）对象的 x 坐标。 offsetY ：设置或获取鼠标指针位置相对于触发事件的（this）对象的 y 坐标。 screenX： 设置或获取获取鼠标指针位置相对于用户屏幕的 x 坐标。 screenY： 设.
事件对象中clientX/Y 、pageX/Y、 screenX/Y、offsetX/Y的区别
fortune丶的blog
08-14 693
事件对象它是系统传给我们的一个对象,触发DOM上的某个事件时，会产生一个事件对象event，事件对象里面包括很多方法和属性，鼠标和键盘等等事件触发的内容都不一样 事件对象有兼容性 那么怎么处理兼容 兼容方法 ie中event事件对象是全局的所以加了window <button> 点击 <button> <script> var btn =...
clientX/Y,pageX/Y,offsetX/Y,layerX/Y,screenX/Y ,offsetTop,offsetLeft 详解
12-16 198
clientX/Y: clientX/Y获取到的是触发点相对浏览器可视区域左上角距离，不随页面滚动而改变 兼容性：所有浏览器均支持 pageX/Y: pageX/Y获取到的是触发点相对文档区域左上角距离，会随着页面滚动而改变 兼容性：除IE6/7/8不支持外，其余浏览器均支持 of...
JS——clientX/Y、screenX/Y、pageX/Y、layerX/Y、offsetX/Y的区别
Dream_6666的博客
04-04 563
JS——clientX/Y、screenX/Y、pageX/Y、layerX/Y、offsetX/Y的区别
js鼠标事件clientX/Y、offsetX/Y、screenX/Y、pageX/Y、x/y的区别
weixin_46376163的博客
04-08 317
X:以浏览器可视窗口为参考，相对窗口左上角的横坐标像素 Y:以浏览器可视窗口为参考，相对窗口左上角的纵坐标像素 clientX：以浏览器可视窗口为参考，相对窗口左上角的横坐标像素 clientY：以浏览器可视窗口为参考，相对窗口左上角的纵坐标像素 ———————————————————————————— offsetX：以被点击的目标元素为参考，相对目标元素左上角横坐标像素 offsetY：以被...
pagex/y offsetx/y screenx/y clientx/y 用法及区别
weixin_30252709的博客
03-24 121
1 pagex/pagey:鼠标相对于整个页面的x/y坐标 注:整个页面的意思就是你整个页面的全部 例如:宽200px 高400px 那么pagex/y他们最大值就是它 2,offsetX/y与pageX/Y结果都一样,但是前者只有IE支持后者IE不支持 3,screenx/y 鼠标在屏幕上的坐标,最大值不会超过屏幕分辨率 4,clientX/y 事件发生时鼠标在浏览器内容区域的x/y坐标...
clientX/Y、offsetX/Y、pageX/Y、screenX/Y和scrollTop/scrollLeft的区别
ludaiyijia的博客
05-18 151
clientX / clientY : 到document顶部和左边的距离。(不包含浏览器的书签栏、导航栏、页签栏)pageX / pageY ：同 clientX / clientYoffsetX / offsetY ：到被点击元素顶部和左边的距离。点击位置到电脑屏幕顶部 和 左边 的距离。scrollLeft / scrollTop：滚动元素滚动的距离。
clientX,pageX,offsetX,x,layerX,screenX,offsetLeft区别分析
09-05
`clientX`, `pageX`, `offsetX`, `x`, `layerX`, `screenX`, 和 `offsetLeft` 是JavaScript中用于描述鼠标位置和元素相对位置的一系列属性。下面我们将详细分析这些属性的区别和应用场景。 1. **screenX**: 这个...
pagyX/Y、clientX/Y、offsetX/Y、screenX/Y；clientHeight、scrollHeight、scrollTop；offsetHeight、offsetTop+滑动条
m0_56029970的博客
09-01 87
JavaScript尺寸和位置的理解，外加简易滑动条实例
鼠标事件之clientX(Y)、offsetX(Y)、screenX(Y)、pageX(Y)、x(y)的区别与使用详解
Janewenhui的博客
12-18 566
文章目录一、鼠标事件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
如何获取鼠标位置，以及pageX/Y、screenX/Y、clientX/Y和offsetX/Y 的区别
小小前端
04-17 427
如何获取鼠标位置 当我们注册事件时，系统会自动给我们创建一个 事件对象 以参数的形式传递到函数内 我们可以先打印一下 事件对象event ,看看里面到底有什么 document.onclick = function(event){ console.log(event) } 那该用哪个，它们又有什么区别呢？ 属性 描述 offsetX / offsetY 相对于父盒子的...
计算机毕业设计之：基于微信小程序的诗词智能学习系统（源码+文档+解答）
程序员阿龙的博客
09-22 4334
博主介绍： ✌我是阿龙，一名专注于Java技术领域的程序员，全网拥有10W+粉丝。作为CSDN特邀作者、博客专家、新星计划导师，我在计算机毕业设计开发方面积累了丰富的经验。同时，我也是掘金、华为云、阿里云、InfoQ等平台的优质作者。通过长期分享和实战指导，我致力于帮助更多学生完成毕业项目和技术提升。 技术范围： 我熟悉的技术领域涵盖SpringBoot、Vue、SSM、HLMT、Jsp、PHP、Nodejs、Python、爬虫、数据可视化、小程序、安卓app、大数据、物联网、机器学习等方
运行VUE项目运行时候的报错汇总
W3306698294的博客
09-21 304
上面的问题解决问题：【在npm install 后面加 --legacy-peer-deps，就可以解决了】
基于Springboot+Vue的高校教室资源管理系统的设计与实现（含源码+数据库）
m0_59480939的博客
09-25 154
这个系统有三个角色：管理员、学生和教师。管理员可以在前台查看教室信息列表并进行预约，而在后台可以管理学生、教师、教室类型、教室信息、教室预约、系统公告和轮播图等模块，支持新增、查看、修改、删除和审核等操作。系统支持管理员后台登录，但不支持学生和教师后台登录，学生和教师则支持前台注册与登录，而管理员不支持前台登录和注册。数据库版本: mysql5.7或8.0。JDK版本: Java JDK1.8。开发系统:Windows10/11。数据库可视化工具: navicat。架构模式:MVC/前后端分离。
jQuery国内大厂CDN加速链接
TANKING，开源开发者！
09-21 344
jQuery的CDN有很多，但都很不稳定，例如国内的bootcdn经常抽风，还有其他的常见的例如jQuery官方的jsDeliverstaticfile，这些都是经常抽风的。导致使用了线上的CDN的页面打开受到影响，那么就没有国内好用的CDN吗？下面是我汇总的一些大厂的！
方法论大师 JavaScript 版本
最新发布
PlayerYK的专栏
09-25 151
无论什么行业、什么问题，都会有一群人擅长通过简单的拼凑和归纳，炮制出一套“高深”的方法论。这些方法论通常看似逻辑严密、层层递进，实则全是空洞的概念堆砌，毫无实质作用。最搞笑的是，他们居然能为任何事物总结出一个“公式”，让人乍一看觉得有理，仔细思考后发现不过是披着华丽外衣的废话。是不是开始觉得这些“方法论大师”其实并没有提供真正有价值的建议？如果你也曾被这些空洞的概念忽悠过，那么来吧，我为你提供一个...
offsetx,clientx,pagex
03-17
offsetX，clientX 和 pageX 都是 JavaScript 中用于获取鼠标相对于文档的坐标的属性。 offsetX：是鼠标相对于当前元素的左边界的水平距离。 clientX：是鼠标相对于浏览器窗口的左边界的水平距离。 pageX：是鼠标...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值