鼠标事件中的x,y含义/clientX,clientY,pageX,pageY,offsetX,offsetY,screenX,screenY,movementX,moventmentY,x,y区别

已于 2022-07-22 17:22:23 修改
阅读量2.3k 收藏 8
点赞数 3
分类专栏： JS 文章标签： 定位 js
于 2020-11-03 17:28:59 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/LEVsunshine/article/details/109468633
版权

打印一下event事件，发现里面有各种各样的偏移量
在这里插入图片描述
区别：

  • clientX/clientY
    距离浏览器可视区域的x，y坐标（不包括滚动条和头部导航栏——相对于body）
  • pageX/pageY
    对于整个页面来说，包括了被卷去的body部分的长度

当页面没有滚动条时，client和page一样

  • movementX/movementY
    两个鼠标移动事件间隔时间中当中鼠标移动的相对坐标

  • offsetX/offsetY
    相对于当前监听元素的x，y坐标；（不包括border）

  • layerX/layerY
    是鼠标相对于目标元素最近（当前dom或父元素）的具有absolute/relative的定位元素的位置（包括border）

  • screenX/screenY
    点击位置距离当前电脑屏幕的x，y坐标

  • x/y
    和clientX、clientY一样

如图
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

to Zero-
关注
专栏目录
clientX、offsetX、screenX、pageX、x的区别
我的blog屋
05-30 860
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
鼠标事件之clientX(Y)、offsetX(Y)、screenX(Y)、pageX(Y)、x(y)的区别与使用详解
Janewenhui的博客
12-18 562
文章目录一、鼠标事件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
threejs下的鼠标事件的各种XY坐标
qq_40712151的博客
06-16 1467
转载于：https://blog.csdn.net/weixin_41342585/article/details/80659736
获取鼠标事件的鼠标x|y坐标
Focus-Fe
03-05 968
获取鼠标事件的鼠标x|y坐标   关于Event相关的可以参考http://zhangyaochun.iteye.com/blog/1439502 兼容性参考http://zhangyaochun.iteye.com/blog/1439543   /* *pointer ---the mouse position x/y* *@function* *@param {Even...
鼠标事件中clientX、offsetX、screenX、pageX、x的区别
qq_45689637的博客
10-24 500
鼠标事件中clientX、offsetX、screenX、pageX、x的区别: 一、clientX、clientY 点击位置距离当前body可视区域的x，y坐标(所在的窗口) 二、pageX、pageY 对于整个页面来说，包括了被卷去的body部分的长度 三、screenX、screenY 点击位置距离当前电脑屏幕的x，y坐标 四、offsetX、offsetY 相对于带有定位的父盒子的x，y坐标 五、x、y 和screenX、screenY一样 如图： ...
clientX,clientY,x,y等的区别[转]
peswe的专栏
03-25 667
clientX, clientY是鼠标当前相对于网页的位置，当鼠标位于页面左上角时clientX=0, clientY=0； offsetX, offsetY是鼠标当前相对于网页中的某一区域的位置，当鼠标位于页面中这一区域的左上角时offsetX=0, offsetY=0； screenX, screenY是相对于用户显示器的位置 x,y是鼠标相对于当前浏览器的位置 Measure...
[转]分析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 423
如何获取鼠标位置 当我们注册事件时，系统会自动给我们创建一个 事件对象 以参数的形式传递到函数内 我们可以先打印一下 事件对象event ,看看里面到底有什么 document.onclick = function(event){ console.log(event) } 那该用哪个，它们又有什么区别呢？ 属性 描述 offsetX / offsetY 相对于父盒子的...
event对象的offsetX, clientX, pageX, screenX
hardly555的博客
11-01 886
现在需要对event对象的几大与坐标有关的属性做一个总结，以便于认识 offsetX|offsetY offsetX/Y获取到是触发点相对被触发dom的左上角距离(包括padding在内，不包括border)，不过左上角基准点在不同浏览器中有区别，以内容区左上角为基准点（不包括边框），如果触发点在边框border上会返回负值。 用途：待发现 clientX|clientY和pageX|pageY clientX|clientY这对坐标相对于窗口，从窗口的顶部/左侧边缘计算得出，类似于cs.
PointerEvent中的movementX/movementY属性
最新发布
zhengsr12345的博客
11-24 332
在使用PointerEvent过程中发现了一个有意思的属性，即movementX/movementY，该属性在mdn文档里说是相对于最后一次鼠标移动位置的位置，这个值一般不会很大，且会出现正负。在这里稍微提一下PointerEvent，该事件继承自MouseEvent，它集成了鼠标和触摸事件的优点，也就意味着它经过合理设置可以替代鼠标和触摸事件，具有良好的复用性和跨平台能力。它的用法大致上跟鼠标事件差不多但略有区别，具体可以参考mdn文档。
因为写不出拖拽移动效果，我恶补了一下Dom中的各种距离
chengbo_eva的博客
06-09 380
因为写不出拖拽移动效果，我恶补了一下Dom中的各种距离
js中事件对象中七种坐标
阿妖的博客
11-16 646
1. clientX clientY 相对于浏览器的左上角的xy坐标 也就是窗口坐标, 不包括工具栏, 滚动条 2. layerX layerY 是鼠标相对于目标元素最近的具有absolute relative的定位元素的位置 包括border 3. movementX movementY 两个鼠标移动事件间隔时间中当中鼠标移动的相对坐标 4. offsetx offsetY 相对于你点击的那个dom节点...
事件
weixin_45261642的博客
08-08 130
事件 一 事件基础 1.定义 事件 ：是通知和侦听组合合成的，先侦听后通知，执行对应的函数。 （1）侦听 document.addElementListener(“事件名称”,事件函数名)； function 事件函数(e){ 执行函数； } （2）创建一个事件对象 var evt=new Event(“事件名称”)； document.dispatchEvent(evt); //通知，抛发 。 （3） ①事件的类型必须相同。 ②事件侦听的对象和抛发的对象必须相同。 ③将事件抛向倾听对象。 ④先侦听
clientX和clientY 事件属性的使用
祈澈菇凉
10-01 1582
需求： 做项目中遇到一个这样的需求，点击属性菜单节点，出现显示框，显示框的位置随着鼠标点击的位置距离而改变。 教程： clientX 事件属性 http://www.runoob.com/jsref/event-clientx.html clientY 事件属性 http://www.runoob.com/jsref/event-clienty.html ...
鼠标事件MouseEvent对象的一些坐标属性总结
小赛赛爱吃肉
01-09 3704
MouseEvent 接口指用户与指针设备( 如鼠标 )交互时发生的事件。使用此接口的常见事件包括：click，dblclick，mouseup，mousedown 等
鼠标事件中参数e对象的值以及clientX、offsetX、screenX、pageX、x的区别
qq_37734787的博客
11-30 1029
别人博客 由鼠标事件（MouseEvent）可以发现： 其中包含了许多的坐标，且每个坐标的含义都不一样。下面我们来挨个介绍常用的坐标，以及它们的含义。 一、clientX、clientY 点击位置距离当前body可视区域的x，y坐标 二、pageX、pageY 对于整个页面来说，包括了被卷去的body部分的长度 三、screenX、screenY 点击位置距离当前电脑屏幕的x，y坐标 四、offsetX、offsetY 相对于带有定位的父盒子的x，y坐标 五、x、y 和screenX、screenY一样 看
clientX,pageX,x,screenX,offsetX等的区别
ssisse的博客
06-01 2606
先总结下区别： event.clientX、event.clientY 鼠标相对于浏览器窗口可视区域的X，Y坐标（窗口坐标），可视区域不包括工具栏和滚动条。IE事件和标准事件都定义了这2个属性 event.pageX、event.pageY 类似于event.clientX、event.clientY，但它们使用的是文档坐标而非窗口坐标。这2个属性不是标准属性，但得到了广泛
鼠标事件中的位置相关的属性ScreenX,ClientX,pageX,layerX,offsetX
Evita
09-01 86
定义 鼠标事件中属性和键盘相关的属性 srceenX(通用属性)相对于屏幕左上角的位置 clientX(通用属性)相对于浏览器的可视区域(浏览器窗口左上角)，不包括滚动条 pageX(非标准属性，IE9以上支持)相对于整个文档，包括滚动条 layerX(非标准属性，IE9以上支持)对于当前事件结点而言，本身或者父元素有position:absolute/relative有定位点, 表示鼠标...
js：事件对象中的7种坐标
彭世瑜的博客
11-18 2109
三大类： 相对于当前点击元素 相对于当前浏览器 相对于整个显示器 7种坐标 1、窗口坐标：clientX、clientY 相对于用户浏览器的左上角的xy坐标 也就是窗口坐标，不包括工具栏、滚动条 2、layerX、layerY 鼠标相对于目标元素最近的具有absolute/relative定位元素的位置，包含border 3、movementX、movementY 两个鼠标移动事件间隔中当中鼠标移动的相对坐标 4、offsetX、offsetY 相对你点击那个dom的左上角x、y坐标 5、文档坐标：pa
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、付费专栏及课程。

余额充值