鼠标事件中clientX、offsetX、screenX、pageX、x的区别

最新推荐文章于 2023-11-17 01:55:00 发布
最新推荐文章于 2023-11-17 01:55:00 发布
阅读量467 收藏 2
点赞数 1
分类专栏： 前端 文章标签： javascript 1024程序员节
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_45689637/article/details/109257677
版权

鼠标事件中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一样

如图：

在这里插入图片描述

自律并放纵者
关注
  • 1
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
clientX,pageX,offsetX,x,layerX,screenX,offsetLeft区别分析
09-05
clientX,pageX,offsetX,x,layerX,screenX,offsetLeft区别分析，需要的朋友可以参考下。
彻底搞懂 offsetX、scrollX、clientX 的区别
热门推荐
lefex的博客
03-05 1万+
无论在 iOS 还是前端开发中，关于如何定位一个元素是必须要掌握的知识，而在前端中，元素定位比较难理解，我们今天一起学习下。在 DOM 设计中，主要通过这些 API 来确定某个元素的具体...
比较offsetX, pageX,clientX,screenX的区别
hhh_hh_h的博客
04-07 691
之前一直没有把offset，page，client和screen这几个属性弄得很清楚，今天花了点时间算是大体上了解了这几个属性的区别，所以把我了解到的写出来，也算是做个总结。 首先我们来看看这几个属性的解释： 1.offsetX：鼠标相对于事件源元素的X坐标，只有IE事件有这2个属性，标准事件没有对应的属性 2.pageX： 鼠标指针的位置，相对于文档的左边缘 3.clientX：返回当事
html5 offsetx,event对象中offsetX,clientX,pageX,screenX的区别
weixin_42357837的博客
06-25 948
1、offsetXoffset意为偏移量,是事件对象距左上角为参考原点的距离。以元素盒子模型的内容区域的左上角为参考点。不包括border。2、clientX事件对象相对于浏览器窗口可视区域的X,Y坐标(窗口坐标),可视区域不包括工具栏和滚动条3、pageX事件对象相对于整个文档的坐标以像素为单位.4、screenX事件对象相对于设备屏幕的左上角的坐标,当改变屏幕的分辨率的时候,坐标会随之改变.以...
clientX、pageX、screenX以及offsetX区别
weixin_42178670的博客
10-29 1446
clientX：鼠标相对于浏览器窗口可视区域x方向坐标clientY：鼠标相对于浏览器窗口可视区域y方向坐标。
浅谈clientX、offsetX、screenX、pageX
漫磋嗟
10-24 2568
clientX、offsetX相对于鼠标事件对象，需要触发鼠标事件才会有clientX、offsetX。 clientX：当事件被触发时鼠标指针相对于窗口左边界的水平坐标,参照点为浏览器内容区域的左上角，该参照点会随之滚动条的移动而移动。 offsetX：当事件被触发时鼠标指针相对于所触发的标签元素的左内边框的水平坐标。 screenX：鼠标位置相对于用户屏幕水平偏移量，此时的参照点也就是原点是屏幕的左上角。 pageX：参照点是页面本身的body原点，而不是浏览器内容区域左上角，它计算的值不会随着滚动条而
鼠标事件中的x,y含义/clientX,clientY,pageX,pageY,offsetX,offsetY,screenX,screenY,movementX,moventmentY,x,y区别
LEVsunshine的博客
11-03 2243
打印一下event事件，发现里面有各种各样的偏移量 区别： clientX/clientY 距离浏览器可视区域的x，y坐标（不包括滚动条和头部导航栏——相对于body） pageX/pageY 对于整个页面来说，包括了被卷去的body部分的长度 当页面没有滚动条时，client和page一样 movementX/movementY 两个鼠标移动事件间隔时间中当中鼠标移动的相对坐标 offsetX/offsetY 相对于当前监听元素的x，y坐标；（不包括border） layerX/laye
一文吃透offsetX、offsetY、scrollTop、scrollY、scrollHeight、clientX、clientY、pageX、pageY以及类似属性的异同点
最新发布
weixin_63383437的博客
11-17 1236
offsetX
鼠标点击事件对象的clientX、pageX、offsetX、screenX、x
kwroi的博客
11-16 462
鼠标点击事件对象的client、page、offset、screen、x相关属性区别
深刻认识clientX，offsetX，screenX
u012950186的专栏
07-07 383
设置或获取鼠标指针位置相对于窗口客户区域的 x,y 坐标，其中客户区域不包括窗口自身的控件和滚动条。    clientX=  clientY=        设置或获取鼠标指针位置相对于触发事件的对象的 x,y 坐标。     offsetX =  offsetY =      设置或获取获取鼠标指针位置相对于用户屏幕的 x,y 坐标     screenX = 
[转]分析x,offsetX clientX screenX,pageX,y,offsetY clientY screenY,pageY之间的区别
03-17
NULL 博文链接：https://meizhi.iteye.com/blog/576133
event.x,event.clientX,event.offsetX区别
01-19
offsetx：设置或者是得到鼠标相对于目标事件的父元素的内边界在x坐标上的位置。 screenX:相对于用户屏幕。测试代码一:[code] <html> <head> </head> [removed] function reload(){ [removed]....
鼠标事件clientX、clientY
04-21
clientX、clientY、pageX、pageY、screenX、screenY、offsetX、offsetY
javascript 图解 event对象offsetX, clientX, pageX, screenX, layerX, x区别
咖啡味的小认真
08-01 704
首先需要知道clientX,clientY,screenX,screenY,offsetX,offsetY 是鼠标事件对象下的几个属性.所以必然是“鼠标事件”发生时候才会有意义； 一、不同浏览器对这些属性的支持： 二、作用及其测试 clientX：当鼠标事件发生时（不管是onclick，还是omousemove，onmouseover等），鼠标相对于浏览器（这里说的是浏览器的有效区域）x轴的位置...
图解事件坐标screenX、clientX、pageX, offsetX的区别
越努力，越幸运！
11-30 1万+
一、图解 如图所示，假设页面中灰色圆点是鼠标点击处，黄色区域是鼠标触发事件对象 二、概念 1、screenX 和screenY 参照点：电脑屏幕左上角 screenX：鼠标点击位置相对于电脑屏幕左上角的水平偏移量 screenY：鼠标点击位置相对于电脑屏幕左上角的垂直偏移量 2、clientX和clientY 参照点：浏览器内容区域左上角 clientX：鼠标点击位置相对...
秒懂鼠标事件clientX、offsetX、screenX、pageX、x的区别！
hj0556的博客
06-04 1747
onclick 鼠标点击事件 onmousedown 鼠标按下事件 onmouseup 鼠标松开事件 onmousemove 鼠标移动事件 onmouseover 鼠标经过事件 onmouseout 鼠标划出事件 由鼠标事件（MouseEvent）可以发现： 其中包含了许多的坐标，且每个坐标的含义都不一样。下面我们来挨个介绍常用的坐标，以及它们的含义。 划重点！！ 一、clientX、clientY 点击位置距离当前body可视区域的x，y坐标 二、pageX、pageY 对于整..
事件clientX、pageX、screenX、offsetX
m0_56436039的博客
04-29 489
clientX、clientY：点击位置距离当前body可视区域的x，y坐标可以理解为距离浏览器窗口的距离，但注意这里不包括浏览器的导航栏距离只是浏览器内容区域。 pageX、pageY：对于整个页面来说，包括了被卷去的body部分的长度相对于文档边缘,包含滚动条距离 screenX、screenY：点击位置距离当前电脑屏幕的x，y坐标 offsetX、offsetY：相对于带有定位的父盒子的x，y坐标 clientX：在水平方向上，鼠标指针距离浏览器左侧边缘的距离。（不包含滚动条） pageX：
javascript实现搜索筛选功能
qq_45689637的博客
11-11 3106
案例样式即功能 HTML代码： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" href="index.css"> <title&gt
offsetX,clientX,pageX,offsetLeft
05-13
假设有一个 div 元素，它的 offsetLeft 为 100px，当鼠标在它内部发生了 click 事件时，offsetX 就表示鼠标相对于这个 div 左侧边框的像素距离，clientX 则表示鼠标相对于浏览器窗口左侧的像素距离，pageX 则表示...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值