js事件坐标大乱斗：screenX、clientX、pageX、offsetX

最新推荐文章于 2023-07-05 15:40:48 发布
最新推荐文章于 2023-07-05 15:40:48 发布
阅读量1.1k 收藏 9
点赞数 1
分类专栏： js基础笔记 文章标签： dom
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_40581714/article/details/118526768
版权

screenX: 鼠标相对于电脑屏幕的X坐标
screenY: 鼠标相对于电脑屏幕的Y坐标
在这里插入图片描述

clientX/clientY: 鼠标的坐标到可视区域的坐标，比如在谷歌浏览器中，指工具栏之下的区域。注意跟页面滚动无关，因为浏览器本身不滚动
在这里插入图片描述

pageX/pageY: 鼠标相对于整个网页主题左上角的坐标。会受到滚动影响。当无滚动时，跟client是一样的值

在这里插入图片描述
offsetX/offsetY： 事件发生时鼠标相对于事件源元素的坐标，获取数据类似pageX/Y，但是受到子元素影响。意思就是pageX/Y总是相对于网页左上角。但是offsetX/Y是相对于触发事件源那个盒子左上角
在这里插入图片描述

其它：
clientWidth：可视区域的宽度
clientHeight：可视区域的高度

挑战一天掉一根头发
关注
  • 1
    点赞
  • 踩
  • 9
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
javascript offsetX与layerX区别
10-29
FF没有offsetX属性，有个layerX属性，只要将事件源的位置设置成相对定位(position:relative)或绝对定位(position:absolute)，两者结果就相等，表示事件源相对于父元素的X坐标。
js的clientX、pageX、screenX等方法来获取鼠标坐标详解
最新发布
weixin_41652495的博客
09-26 1016
记录js的clientX、pageX、screenX
JS之clientX,clientY,screenX,screenY,offsetX,offsetY区别测试
热门推荐
每天进步一点点
05-09 6万+
首先需要知道clientX,clientY,screenX,screenY,offsetX,offsetY 是鼠标事件对象下的几个属性， 之前也一直对这些属性搞的稀里糊涂，看文档上说的也是不太理解，反正看完一头雾水，所以自己动手亲自测试了一下；说一下自己的理解； clientX,clientY,screenX,screenY,offsetX,offsetY 这几个属性是“鼠标事件对象”下的属性
图解鼠标事件的 ScreenX ，LayerX，clientX，PageX，offsetX，X
fang_my的博客
02-27 1377
这篇文章是由我随手做的笔记改编而来，笔记内容比较粗糙，转化为文章后个人感觉又重新复习了一遍，加深了很大的印象。如果该文章能帮助到一些人，也是一件幸事。可能我以后也会经常来翻阅自己的这篇文章～这几个属性确实容易搞混🤔。
js中offset、client、scroll、screen、page用法
CYL_2021的博客
04-26 1489
一.offset offset翻译过来就是偏移量，我们使用offset系列相关属性可以动态的得到该元素的位置（偏移），大小等 获取元素距离带有定位父元素的位置 获取元素自身的大小（宽度高度） 注意：返回值都不带单位 常用属性： 1.1 offsetX，offsetY 获取鼠标指针位置相对于触发事件的对象的 x 坐标和y坐标。offsetX （offsetY）规定了事件对象与目标节点的内填充边（padding edge）在 X （Y）轴方向上的偏移量。 2.2 offsetWidth，offsetHe
clientX,pageX,offsetX,x,layerX,screenX,offsetLeft区别分析
09-05
clientX,pageX,offsetX,x,layerX,screenX,offsetLeft区别分析，需要的朋友可以参考下。
[转]分析x,offsetX clientX screenX,pageX,y,offsetY clientY screenY,pageY之间的区别
03-17
NULL 博文链接：https://meizhi.iteye.com/blog/576133
JavaScript 学习笔记（十六） js事件
12-03
回顾 事件对象里包含三个方面的信息····... 获取屏幕坐标 事件对象属性screenX和screenY 事件的类型 根据触发事件的事物和事件发生的对象，可将浏览器中发生的事件分为几个类型： 一、 鼠标事件 每个鼠标事件都会给
event.x,event.clientX,event.offsetX区别
01-19
offsetx：设置或者是得到鼠标相对于目标事件的父元素的内边界在x坐标上的位置。 screenX:相对于用户屏幕。测试代码一:[code] <html> <head> </head> [removed] function reload(){ [removed]....
JS中 PageX、clientX、offsetX、layerX、offsetTop、offsetWidth各位置属性详解
qq_43631129的博客
07-05 5407
PageX、clientX、offsetX、layerX、offsetTop、offsetWidth各位置属性详解
JS——clientX/Y、screenX/Y、pageX/Y、layerX/Y、offsetX/Y的区别
Dream_6666的博客
04-04 497
JS——clientX/Y、screenX/Y、pageX/Y、layerX/Y、offsetX/Y的区别
js 事件回调函数的对象属性说明：clientX、screenX、offsetX、pageX
PrimaryColor
11-19 1509
clientX 鼠标相对于浏览器左上角x轴的坐标； 不随滚动条滚动而改变； clientY 鼠标相对于浏览器左上角y轴的坐标； 不随滚动条滚动而改变； pageX 鼠标相对于浏览器左上角x轴的坐标； 随滚动条滚动而改变； pageY 鼠标相对于浏览器左上角y轴的坐标； 随滚动条滚动而改变； screenX 鼠标相对于显示器屏幕左上角x轴的坐标； screenY 鼠标相对于显示器屏幕左上角y轴的坐标； offsetX 鼠标相对于被绑定事件的元素左上角X轴的坐标； offsetY 鼠标相对于...
clientX、pageX、screenX以及offsetX区别
weixin_42178670的博客
10-29 1407
clientX：鼠标相对于浏览器窗口可视区域x方向坐标clientY：鼠标相对于浏览器窗口可视区域y方向坐标。
JavaScript 中一些概念理解 ：clientX、clientY、offsetX、offsetY、screenX、screenY
甜心的专栏
11-11 6616
clientX：设置或获取鼠标指针位置相对于窗口客户区域的 x 坐标，其中客户区域不包括窗口自身的控件和滚动条。 clientY： 设置或获取鼠标指针位置相对于窗口客户区域的 y 坐标，其中客户区域不包括窗口自身的控件和滚动条。 offsetX： 设置或获取鼠标指针位置相对于触发事件的（this）对象的 x 坐标。 offsetY ：设置或获取鼠标指针位置相对于触发事件的（this）对象的 y 坐标。 screenX： 设置或获取获取鼠标指针位置相对于用户屏幕的 x 坐标。 screenY： 设.
图解Js event对象offsetX, clientX, pageX, screenX, layerX, x区别
lzding的博客
05-02 5万+
通过 2 张图和 1 张表格，轻松区别 Javascript Event 对象中的offsetX, clientX, pageX, screenX, layerX, x等属性。 不同浏览器对这些属性的支持：
【随手记】js获取screen信息和query参数格式化
qq_48896417的博客
08-25 303
js实现获取screen信息和query参数格式化、获取cookie。
2022-03-27 screenX和clientX的区别以及offsetX和pageX的区别
GAARA
03-27 1289
1.screenX和clientX的区别 screenX是电脑显示器原点(显示器左上角)到鼠标点击位置的距离 clientX是可视化窗口原点(网页左上角)到鼠标点击位置的距离 2.offsetX和pageX的区别 offsetX是事件源原点(div左上角)到鼠标点击位置的距离 pageX是水平滚动条的距离(如果有的话)+clientX ...
pageX,clientX,screenX,offsetX区别
weixin_43368552的博客
08-22 267
注意，整个页面的意思就是你整个网页的全部，比如说网页很宽很长，宽2000px，高3000px，那pageX,pageY的最大值就是它们了。特别说明：IE下此属性不规范，它们的最小值不是0而是2，也就是说IE下的clientX/clientY比火狐下始终大2px。当你将浏览器窗口缩小时，clientX/clientY的最大值也会缩小，但始终，它们的最大值不会超过你浏览器可视区域。浏览器内容区域即浏览器窗口中用来显示网页的可视区域，注意这个可视，也就是说需要拖动滚动条才能看到的区域不算。特别说明：IE不支持！
screenX clientX pageX的区别
weixin_44011751的博客
07-20 734
screenX:鼠标位置相对于用户屏幕水平偏移量，而screenY也就是垂直方向的，此时的参照点也就是原点是屏幕的左上角。(简单的说就是电脑桌面的左边到当前鼠标点的距离) clientX:跟screenX相比就是将参照点改成了浏览器内容区域的左上角，该参照点会随之滚动条的移动而移动。(就是浏览器可视区域左边和上边到当前点的距离,不包含滚动条遮着的区域) pageX：参照点也是浏览器内容区域的左上角，但它不会随着滚动条而变动 如图(红点就是鼠标当前位置,pageX就是整个文档包括滚动区域左边上边到该点的位置.
pageX offsetX screenX
07-27
这些是JavaScript中的一些属性，用于获取鼠标...- offsetX：鼠标事件相对于事件目标元素的水平坐标。 - screenX：鼠标事件相对于用户屏幕的水平坐标。 这些属性可以在处理鼠标事件时使用，以获取鼠标位置的相关信息。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值