clientX&&screenX&&offsetX&&pageX

最新推荐文章于 2023-08-15 19:21:02 发布
最新推荐文章于 2023-08-15 19:21:02 发布
阅读量180 收藏
点赞数
分类专栏： javaScript 文章标签： javascript html html5
原文链接：https://wangdoc.com/javascript/events/mouse.html#mouseeventmovementxmouseeventmovementy
版权

1. MouseEvent.clientX，MouseEvent.clientY

说明

MouseEvent.clientX属性返回鼠标位置相对于浏览器窗口左上角的水平坐标（单位px），MouseEvent.clientY返回**垂直坐标。**这两个属性都是只读属性。

2. MouseEvent.screenX，MouseEvent.screenY

说明

MouseEvent.screenX属性返回鼠标位置相对于屏幕左上角的水平坐标（单位像素），MouseEvent.screenY属性返回垂直坐标。这两个属性都是只读属性。

3. MouseEvent.offsetX，MouseEvent.offsetY

说明

MouseEvent.offsetX属性返回鼠标位置与目标节点左侧的padding边缘的水平距离（单位像素），MouseEvent.offsetY属性返回与目标节点上方的padding边缘的垂直距离。这两个属性都是只读属性。

4. MouseEvent.pageX，MouseEvent.pageY

说明

MouseEvent.pageX属性返回鼠标位置与文档左侧边缘的距离（单位像素），MouseEvent.pageY属性返回与文档上侧边缘的距离（单位像素）。它们的返回值都包括文档不可见的部分。这两个属性都是只读。

5. MouseEvent.movementX，MouseEvent.movementY

说明

MouseEvent.movementX属性返回当前位置与上一个mousemove事件之间的水平距离（单位像素）。数值上，它等于下面的计算公式。

currentEvent.movementX = currentEvent.screenX - previousEvent.screenX

MouseEvent.movementY同上。

参考链接

  1. 鼠标事件
我家空空
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
[转]分析x,offsetX clientX screenX,pageX,y,offsetY clientY screenY,pageY之间的区别
03-17
NULL 博文链接：https://meizhi.iteye.com/blog/576133
跟随鼠标的萤火虫
02-23
} }}function YY_Mousetrace(evnt) { if (yyns4){if (evnt.pageX) {yy_ml=evnt.pageX; yy_mt=evnt.pageY;} }else{yy_ml=(event.clientX + document.body.scrollLeft);yy_mt=(event.clientY + document.body....
html5 offsetx,event对象中offsetX,clientX,pageX,screenX的区别
weixin_42357837的博客
06-25 938
1、offsetXoffset意为偏移量,是事件对象距左上角为参考原点的距离。以元素盒子模型的内容区域的左上角为参考点。不包括border。2、clientX事件对象相对于浏览器窗口可视区域的X,Y坐标(窗口坐标),可视区域不包括工具栏和滚动条3、pageX事件对象相对于整个文档的坐标以像素为单位.4、screenX事件对象相对于设备屏幕的左上角的坐标,当改变屏幕的分辨率的时候,坐标会随之改变.以...
event.offsetX ,事件
qq_45505241的博客
11-07 2410
offsetTop、clientTop、scrollTop等属性详解【概念+详细例子分析】
hannah2233的博客
12-24 4822
1、 offsetTop、offsetLeft2、 offsetWidth、offsetHeight3、 offsetX、offsetY1、 clientWidth、clientHeight2、 clientTop、clientLeft3、 clientX、clientY1、 scrollWidth、scrollHeight2、 scrollTop、scrollLeft
这是一篇关于获取页面的各种距离总结
最新发布
a_xia_o的博客
08-15 275
与 clientHeight 和 clientWidth 相比，我想这对属性用的更多一点，因为更多的时候我们需要获取的是元素的完整宽高。offset 有偏移的意思，所以这里也可以理解为鼠标位置相对于目标元素内部左上角的偏移值，和目标元素本身以及外部的元素都无关。分别点击 hello 元素的绿色边框和空白区域，会发现前者的值为负数，后者的值为整数，且都是相对空白区域的左上角开始计算的。分别返回元素的高度和宽度，包括元素本身的高和宽、padding 和 border ，以及滚动条的高和宽。
clientX，offsetX，screenX意义
东语的专栏
08-21 521
一、定义 clientX 设置或获取鼠标指针位置相对于窗口客户区域的 x 坐标，其中客户区域不包括窗口自身的控件和滚动条。  clientY 设置或获取鼠标指针位置相对于窗口客户区域的 y 坐标，其中客户区域不包括窗口自身的控件和滚动条。  offsetX 设置或获取鼠标指针位置相对于触发事件的对象的 x 坐标。  offsetY 设置或获取鼠标指针位置相对于触发事件的对象的 y 坐标
clientX,pageX,offsetX,x,layerX,screenX,offsetLeft区别分析
09-05
clientX,pageX,offsetX,x,layerX,screenX,offsetLeft区别分析，需要的朋友可以参考下。
event.x,event.clientX,event.offsetX区别
01-19
clientX:相对于客户区域的x坐标位置，不包括滚动条，就是正文区域。 offsetx：设置或者是得到鼠标相对于目标事件的父元素的内边界在x坐标上的位置。 screenX:相对于用户屏幕。测试代码一:[code] <html> <...
clientX,pageX,screenX，offsetLeft，scrollTop
wjping11360的专栏
05-19 496
这个东西，以为理解了，今天彻底弄弄。 clientX 观点：鼠标相对于WINDOWS的坐标。 这里这个WINDOWS是指我们能看见的浏览器大小。所以不可能超过显示器的大小，如screen.width,screen.height 证明：点击获得clientX,clientY的大小，设置为图片定位的位置。 如果上面观点不成立，也就是这个坐标不是浏览器范围内的，例如是相对DOCUMENT的，那
获取鼠标位置
09-06 308
clientX 设置或获取鼠标指针位置相对于窗口客户区域的 x 坐标，其中客户区域不包括窗口自身的控件和滚动条。clientY 设置或获取鼠标指针位置相对于窗口客户区域的 y 坐标，其中客户区域不包括窗口自身的控件和滚动条。offsetX 设置或获取鼠标指针位置相对于触发事件的对象的 x 坐标。offsetY 设置或获取鼠标指针位置相对于触发事件的对象的 y 坐标。screenX 设置或获取获取鼠
浏览器中5种常用的事件解析
weixin_44917365的博客
06-30 964
本篇文章给大家带来的内容是关于浏览器中常用的事件解析，有一定的参考价值，有需要的朋友可以参考一下，希望对你有所帮助。
图解鼠标事件的 ScreenX ，LayerX，clientX，PageX，offsetX，X
fang_my的博客
02-27 1377
这篇文章是由我随手做的笔记改编而来，笔记内容比较粗糙，转化为文章后个人感觉又重新复习了一遍，加深了很大的印象。如果该文章能帮助到一些人，也是一件幸事。可能我以后也会经常来翻阅自己的这篇文章～这几个属性确实容易搞混🤔。
研究MouseEvent中的clientX、offsetX、pageX、screenX
mtgr的博客
01-28 2554
    很多时候需要在鼠标点击的时候获取点击的坐标来处理一些逻辑，有时候clientX、offsetX、pageX用的也不清楚，特此做了一个实验来记录。 1.含义 clientX 提供应用程序客户区域内发生事件的水平坐标（与页面内的坐标相对） offsetX 鼠标指针在该事件与目标节点的填充边缘之间的X坐标中的偏移量 pageX 相对于整个文档的左边缘单击鼠标的X（水...
鼠标事件中参数e对象的值以及clientX、offsetX、screenX、pageX、x的区别
qq_37734787的博客
11-30 894
别人博客 由鼠标事件（MouseEvent）可以发现： 其中包含了许多的坐标，且每个坐标的含义都不一样。下面我们来挨个介绍常用的坐标，以及它们的含义。 一、clientX、clientY 点击位置距离当前body可视区域的x，y坐标 二、pageX、pageY 对于整个页面来说，包括了被卷去的body部分的长度 三、screenX、screenY 点击位置距离当前电脑屏幕的x，y坐标 四、offsetX、offsetY 相对于带有定位的父盒子的x，y坐标 五、x、y 和screenX、screenY一样 看
秒懂鼠标事件clientX、offsetX、screenX、pageX、x的区别！
hj0556的博客
06-04 1669
onclick 鼠标点击事件 onmousedown 鼠标按下事件 onmouseup 鼠标松开事件 onmousemove 鼠标移动事件 onmouseover 鼠标经过事件 onmouseout 鼠标划出事件 由鼠标事件（MouseEvent）可以发现： 其中包含了许多的坐标，且每个坐标的含义都不一样。下面我们来挨个介绍常用的坐标，以及它们的含义。 划重点！！ 一、clientX、clientY 点击位置距离当前body可视区域的x，y坐标 二、pageX、pageY 对于整..
鼠标事件中的x,y含义/clientX,clientY,pageX,pageY,offsetX,offsetY,screenX,screenY,movementX,moventmentY,x,y区别
LEVsunshine的博客
11-03 2229
打印一下event事件，发现里面有各种各样的偏移量 区别： clientX/clientY 距离浏览器可视区域的x，y坐标（不包括滚动条和头部导航栏——相对于body） pageX/pageY 对于整个页面来说，包括了被卷去的body部分的长度 当页面没有滚动条时，client和page一样 movementX/movementY 两个鼠标移动事件间隔时间中当中鼠标移动的相对坐标 offsetX/offsetY 相对于当前监听元素的x，y坐标；（不包括border） layerX/laye
javascript MouseEvent对象
Claroja
01-18 2957
鼠标事件监听 事件 描述 auxclick onauxclick click onclick contextmenu oncontextmenu dblclick ondblclick mousedown onmousedown mouseenter onmouseenter mouseleave onmouseleave mousemove onmou...
mouseEvent事件——mouse坐标描述——focus事件——input事件——节流（thorttle）——mouseWheel(滚轮事件)
阿牛哥的博客
07-25 470
mouseEvent事件——mouse坐标描述——focus事件——input事件——节流（thorttle）——mouseWheel(滚轮事件)
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、付费专栏及课程。

余额充值