图解offsetX、offsetY和clientX、clientY和pageX、pageY和screenX、screenY的区别

最新推荐文章于 2023-11-17 01:55:00 发布
最新推荐文章于 2023-11-17 01:55:00 发布
阅读量5.1k 收藏 40
点赞数 10
文章标签： javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_44603011/article/details/117768212
版权

 

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

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

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

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

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

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

逆风优雅
关注
  • 10
    点赞
  • 踩
  • 40
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
dom
03-31
dom01元素位置测试client：都是相对于视口。 getBoundingClientRect（） 它们的值是相对于视口的，而不是绝对的。会通过滚动而改变 mouseEvent：（鼠标事件）[ ] offsetX，offsetY：事件属性返回触发事件时，鼠标相对于事件源元素的X，Y坐标，标准事件没有对应的属性 clientX，clientY：事件属性返回当事件被触发时鼠标指针相对于浏览器页面（或客户区）的水平坐标，垂直坐标 pageX，pageY：事件属性返回当事件被触发时鼠标指针相对于整个页面左上角的水平坐标，垂直坐标 screenX，screenY：事件属性返回当事件被触发时鼠标位置相对于用户屏幕水水平坐标，垂直坐标，此时的参照点也就是原点是屏幕的左上角。 DOMContentLoaded事件：等待dom文档加载完成 el.offsetTop：相对于父元素的转换量（父元素为r
[转]分析x,offsetX clientX screenX,pageX,y,offsetY clientY screenY,pageY之间的区别
03-17
NULL 博文链接：https://meizhi.iteye.com/blog/576133
一文吃透offsetX、offsetY、scrollTop、scrollY、scrollHeight、clientX、clientY、pageX、pageY以及类似属性的异同点
最新发布
weixin_63383437的博客
11-17 1843
offsetX
offsetX各种值总结
风起
08-05 2737
pageX: 页面X坐标位置 pageY: 页面Y坐标位置 screenX: 屏幕X坐标位置 screenY: 屏幕Y坐标位置 clientX: 鼠标的坐标到页面左侧的距离 clientY: 鼠标的坐标到页面顶部的距离 clientWidth：可视区域的宽度 clientHeight：可视区域的高度 offsetX：鼠标坐标到元素的左侧的距离 offsetY：鼠标坐标到元素的顶部的距离 offsetLeft： 该元素外边框距离包含元素内边框左侧的距离 offsetTop：该元素外边框距离包含元素内
pageX/pageY、clientX/clientY、screenX/screenY的区别
cai_niao5623的博客
10-15 2304
在触发鼠标事件的时候会传一个event参数，在这个参数中我们可以获得pageX/pageY、clientX/clientY、screenX/screenY，但是这几个属性有啥区别呢？看下图 screenX/screenY：其实就是你的鼠标指针距离你电脑屏幕左侧边缘和上侧边缘的距离 clientX/clientY：其实就是你的鼠标指针距离当前网页最左侧和最上侧的距离(不包含滚动条的距离) pageX/pageY：其实就是你的鼠标指针距离当前网页最最侧和最上侧的距离(包含滚动条的距离) ...
鼠标位置的获取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栏和后退按钮下方。这一点可以在浏览器窗口中的任何位置， 并且如果在...
offsetX和offsetLeft
weixin_52512511的博客
07-17 327
注意：offsetLeft和offsetWidth都是dom元素上的属性，而offsetX是function上event的属性。offsetX和offsetY表示（鼠标位置）相对于最近父级元素的坐标（无论父级是否定位）（不管是谁触发）相对于最近定位父级元素的坐标，若在所有的父级上都没有定位，则相对于整个文档。（暂时还没学到offsetWidth，以后再补充）
鼠标事件clientX、clientY
04-21
clientX、clientY、pageX、pageY、screenX、screenY、offsetX、offsetY
js Event对象的5种坐标
10-28
3. **offsetX 和 offsetY**： 这两个属性表示鼠标相对于事件源元素边框的距离，但它们在IE8及以下版本中并不支持。在Firefox中，可以通过计算`event.clientX - element.getBoundingClientRect().left`和`event....
vue实现拖拽效果
11-27
首先要搞明白分清clientY pageY screenY layerY offsetY的区别 作用3（事件对象中记录的鼠标位置） 语法 解释 evt.screenX 相对于屏幕的左上角为原点 evt.screenY evt.clientX 相对于浏览器的客户端左上角为原点...
关于偏移量offset-x、offset-y的取值如何判断增减
08-31 6321
在设置偏移量的时候，我们可以非常清楚往哪个方向偏移，那么问题来了，offset-y和offset-x的值我要增加呢？还是减少呢？ 虽然不是什么技术活，但是忘了是不是需要自己试试呢？那么就是有点浪费时间了.......所以我自己画了个图，供大家参考 ...
浅谈clientX、offsetX、screenX、pageX
漫磋嗟
10-24 2623
clientX、offsetX相对于鼠标事件对象，需要触发鼠标事件才会有clientX、offsetX。 clientX：当事件被触发时鼠标指针相对于窗口左边界的水平坐标,参照点为浏览器内容区域的左上角，该参照点会随之滚动条的移动而移动。 offsetX：当事件被触发时鼠标指针相对于所触发的标签元素的左内边框的水平坐标。 screenX：鼠标位置相对于用户屏幕水平偏移量，此时的参照点也就是原点是屏幕的左上角。 pageX：参照点是页面本身的body原点，而不是浏览器内容区域左上角，它计算的值不会随着滚动条而
event对象的offsetX、clientX、pageX、screenX及 window.innerWidth、outerWidth使用详解
lwx931449660的博客
05-12 1302
offset offsetX、offsetY为当前鼠标点击位置距离当前元素参考原点（左上角）的距离，而不同浏览器参考原点的位置不尽相同，FF及Chrome中参考原点为内容区域左上角，不包含元素边框 offsetX 鼠标当前点击位置距离当前点击元素内容区域最左边（不包含边框）的距离 offsetY 鼠标当前点击位置距离当前点击元素内容区域最上边（不包含边框）的距离 点击不同位置，参考原点不同，则距离不同 以下四个点可供理解offset的相对位置及尺寸 client...
js中offset、client、scroll、screen、page用法
CYL_2021的博客
04-26 1608
一.offset offset翻译过来就是偏移量，我们使用offset系列相关属性可以动态的得到该元素的位置（偏移），大小等 获取元素距离带有定位父元素的位置 获取元素自身的大小（宽度高度） 注意：返回值都不带单位 常用属性： 1.1 offsetX，offsetY 获取鼠标指针位置相对于触发事件的对象的 x 坐标和y坐标。offsetX （offsetY）规定了事件对象与目标节点的内填充边（padding edge）在 X （Y）轴方向上的偏移量。 2.2 offsetWidth，offsetHe
傻瓜式讲解 让你理解【拖拽】如何实现
weixin_66379774的博客
08-17 186
傻瓜式讲解 让你理解vue2中【拖拽】如何实现
JS之clientX,clientY,screenX,screenY,offsetX,offsetY等区别
MO天才的博客
03-15 1865
1.event.clientX、event.clientY鼠标相对于浏览器窗口可视区域的X，Y坐标（窗口坐标），可视区域不包括工具栏和滚动条。IE事件和标准事件都定义了这2个属性2.event.pageX、event.pageY类似于event.clientX、event.clientY，但它们使用的是文档坐标而非窗口坐标。这2个属性不是标准属性，但得到了广泛支持。IE事件中没有这2个属性。3.e...
JS-那些年困扰我的offsetT/L/W/H和scrollT/L/W/H......
每天进步一点点
05-23 1618
学习过js的人，相信都曾经被这堆东西困扰： clientWidth,clientHeight,clientX，clientY,offsetX.offsetY ,offsetLeft,offsetTop ,offsetWidth,offsetHeight, scrollTop,scrollLeft 等等，看着这堆东西就开始犯晕呕吐。 他们到底是干嘛滴那？今天就来让我们彻底击碎这群玩意，
offsetX，clientX，pageX
DongFuPanda的博客
02-10 289
鼠标的位置 offsetX offsetY 相当于事件源元素的位置坐标。IE 只支持 offsetX 和 offsetY。网上有文章说 IE 和 chrome 有区别，但是我给父元素加了 border、padding 后发现数值一致，并无区别，所以应该可以放心使用。 clientX clientY 相对于浏览器视口的坐标。 pageX pageY 相对于 document 左上角的坐标。 ...
PageX、clientX、screenX、offsetX、layerX的区别
qq_45044074的博客
03-08 7689
一.PageX和clientX PageX:鼠标在页面上的位置,从页面左上角开始,即是以页面为参考点,不随滑动条移动而变化clientX:鼠标在页面上可视区域的位置,从浏览器可视区域左上角开始,即是以浏览器滑动条此刻的滑动到的位置为参考点,随滑动条移而变化. 二.screenX screenX:鼠标在屏幕上的位置,从屏幕左上角开始,这个没有任何争议 三.offsetX和layerX offsetX:IE特有,鼠标相比较于触发事件的元素的位置,以元素盒子模型的内容区域的左上角为参考点,如果有bode
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、付费专栏及课程。

余额充值