2022-03-27 screenX和clientX的区别以及offsetX和pageX的区别

鼠标事件坐标详解
最新推荐文章于 2025-09-07 23:35:21 发布
原创 最新推荐文章于 2025-09-07 23:35:21 发布 · 1.3k 阅读 · 3 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#js #bom

本文详细解释了screenX、clientX、offsetX和pageX等鼠标事件坐标的含义及区别。screenX指从显示器左上角到鼠标点击位置的距离；clientX指从网页左上角到鼠标点击位置的距离；offsetX指从事件源div左上角到鼠标点击位置的距离；pageX则为水平滚动条距离加clientX。
1.screenX和clientX的区别

screenX是电脑显示器原点(显示器左上角)到鼠标点击位置的距离
clientX是可视化窗口原点(网页左上角)到鼠标点击位置的距离

2.offsetX和pageX的区别

offsetX是事件源原点(div左上角)到鼠标点击位置的距离
pageX是水平滚动条的距离(如果有的话)+clientX

HTML中的screenX的区别
CbrFullstack的博客
10-03 312
这两个属性在大多数现代浏览器中是等效的，它们都返回窗口左边缘相对于屏幕左边缘的像素距离。在HTML中，screenX是一个用于获取浏览器窗口相对于用户屏幕左边缘的水平位置的属性。在上面的示例代码中，我们首先创建了一个带有id为"windowX"的span元素，用于显示窗口的水平位置。然后，使用JavaScript代码获取窗口的水平位置，并将其赋值给span元素的textContent属性，从而在页面上显示出来。然而，需要注意的是，screenX属性与窗口大小无关，它仅提供了窗口位置相关的信息。
clientX、offsetX、screenX、pageX、x的区别
我的blog屋
05-30 1114
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
图解事件坐标screenX、clientX、pageX, offsetX的区别
热门推荐
越努力，越幸运！
11-30 1万+
一、图解 如图所示，假设页面中灰色圆点是鼠标点击处，黄色区域是鼠标触发事件对象 二、概念 1、screenX 和screenY 参照点：电脑屏幕左上角 screenX：鼠标点击位置相对于电脑屏幕左上角的水平偏移量 screenY：鼠标点击位置相对于电脑屏幕左上角的垂直偏移量 2、clientX和clientY 参照点：浏览器内容区域左上角 clientX：鼠标点击位置相对...
screenX与clientX区别
qq_36220534的博客
10-21 1708
screenX:鼠标位置相对于用户屏幕水平偏移量，而screenY也就是垂直方向的clientX:跟screenX相比就是将参照点改成了浏览器内容区域的左上角pageX：参照点也是浏览器内容区域的左上角
鼠标事件坐标详解：clientX、pageX、offsetX、screenX区别
最新发布
m0_52726759的博客
09-07 520
在 JavaScript 事件处理中，clientXpageXoffsetXscreenX是用于获取鼠标事件位置信息的属性，但它们各自代表不同的坐标系和参考点。
clientX、offsetX、screenX、pageX的区别
Serena_tz的博客
02-22 5871
一、概念总结 1、event.clientX、event.clientY 鼠标相对于浏览器窗口可视区域的X，Y坐标（窗口坐标），可视区域不包括工具栏和滚动条。IE事件和标准事件都定义了这2个属性.clientX指可视区域内离左侧的距离，以滚动条滚动到的位置为参考点。各个浏览器相同。即当有滚动条时clientX 小于 pageX。 2、event.pageX、event.pageY 类似于event.clientX、event.clientY，但它们使用的是文档坐标而非窗口坐标。这2个属性不是标准属性，但得到
screenX clientX pageX的区别
weixin_44011751的博客
07-20 856
screenX:鼠标位置相对于用户屏幕水平偏移量，而screenY也就是垂直方向的，此时的参照点也就是原点是屏幕的左上角。(简单的说就是电脑桌面的左边到当前鼠标点的距离) clientX:跟screenX相比就是将参照点改成了浏览器内容区域的左上角，该参照点会随之滚动条的移动而移动。(就是浏览器可视区域左边和上边到当前点的距离,不包含滚动条遮着的区域) pageX：参照点也是浏览器内容区域的左上角，但它不会随着滚动条而变动 如图(红点就是鼠标当前位置,pageX就是整个文档包括滚动区域左边上边到该点的位置.
clientX,pageX,offsetX,x,layerX,screenX,offsetLeft区别分析
09-05
`clientX`, `pageX`, `offsetX`, `x`, `layerX`, `screenX`, 和 `offsetLeft` 是JavaScript中用于描述鼠标位置和元素相对位置的一系列属性。下面我们将详细分析这些属性的区别和应用场景。 1. **screenX**: 这个...
浅谈clientX、offsetX、screenX、pageX
漫磋嗟
10-24 2952
clientX、offsetX相对于鼠标事件对象，需要触发鼠标事件才会有clientX、offsetX。 clientX：当事件被触发时鼠标指针相对于窗口左边界的水平坐标,参照点为浏览器内容区域的左上角，该参照点会随之滚动条的移动而移动。 offsetX：当事件被触发时鼠标指针相对于所触发的标签元素的左内边框的水平坐标。 screenX：鼠标位置相对于用户屏幕水平偏移量，此时的参照点也就是原点是屏幕的左上角。 pageX：参照点是页面本身的body原点，而不是浏览器内容区域左上角，它计算的值不会随着滚动条而
图解offsetX、offsetY和clientX、clientY和pageX、pageY和screenX、screenY的区别
逆风优雅的博客
06-10 6252
offsetX、offsetY: 鼠标相对于事件源元素的X,Y坐标。比如说，我给黄色的盒子定义一个点击事件，则这个offset的坐标原点就在这个黄色盒子的左上角 clientX、clientY: 鼠标相对于浏览器窗口可视区域的X，Y坐标（窗口坐标），可视区域不包括工具栏和滚动条。 pageX、pagey: 事件发生时鼠标相对于整个页面的坐标。整个页面是说整个网页的区域。 pageX=clientX+横向滚动区域(如果有滚动条) pagey=clienty+纵向滚动区域(如果有滚动条) s...
clientX,pageX,screenX，offsetLeft，scrollTop
wjping11360的专栏
05-19 590
这个东西，以为理解了，今天彻底弄弄。 clientX 观点：鼠标相对于WINDOWS的坐标。 这里这个WINDOWS是指我们能看见的浏览器大小。所以不可能超过显示器的大小，如screen.width,screen.height 证明：点击获得clientX,clientY的大小，设置为图片定位的位置。 如果上面观点不成立，也就是这个坐标不是浏览器范围内的，例如是相对DOCUMENT的，那
screenX clientX pageX概念
wjping11360的专栏
05-19 835
screenX:鼠标位置相对于用户屏幕水平偏移量，而screenY也就是垂直方向的，此时的参照点也就是原点是屏幕的左上角。 clientX:跟screenX相比就是将参照点改成了浏览器内容区域的左上角，该参照点会随之滚动条的移动而移动。 pageX：参照点也是浏览器内容区域的左上角，但它不会随着滚动条而变动 如图(红点就是鼠标当前位置) clientX pageX概念" a
图解鼠标事件的 ScreenX ，LayerX，clientX，PageX，offsetX，X
fang_my的博客
02-27 2605
这篇文章是由我随手做的笔记改编而来，笔记内容比较粗糙，转化为文章后个人感觉又重新复习了一遍，加深了很大的印象。如果该文章能帮助到一些人，也是一件幸事。可能我以后也会经常来翻阅自己的这篇文章～这几个属性确实容易搞混🤔。
screenX与offsetX与clientX的区别
java开发，随手记点东西。
03-21 4849
如图所示, event.screenX是屏幕左上角到鼠标当前位置的x轴距离 event.clientX是浏览器左上角到鼠标当前位置的x轴距离 event.setoffX是鼠标当前点击控件左上角到鼠标当前位置的x轴距离 ...
screenX,clientX的区别
热情的血液、石头的冰冷
04-02 591
IE ，FF 通用属性： screenX，screenY 获取事件触发是,鼠标在屏幕中的位置相对于电脑屏幕的坐标，也就是相对于显示器的坐标；， clientX，clientY  获取事件触发时，鼠标在屏幕中的位置相对于浏览器显示区域的坐标，无论浏览器中的滚动条怎么拉，图片中蓝点的坐标都不会变，因为是鼠标在电脑屏幕中的位置相对于浏览器显示区域的坐标；看下图：
clientX、screenX、offsetX区别
LLL_liuhui的博客
06-04 478
1、clientX/clientY clientX: 鼠标相对于浏览器文档显示区的水平X坐标,不包括工具栏和滚动条 clientY:鼠标相对于浏览器文档显示区的垂直Y坐标,不包括工具栏和滚动条 2、screenX/screenY screenX:鼠标相对于显示器屏幕的水平X坐标,不包括滚动条 screenY:鼠标相对于显示器屏幕的垂直Y坐标,不包括滚动条 3、offsetX/offse...
clientX,pageX,x,screenX,offsetX等的区别
ssisse的博客
06-01 2700
先总结下区别： event.clientX、event.clientY 鼠标相对于浏览器窗口可视区域的X，Y坐标（窗口坐标），可视区域不包括工具栏和滚动条。IE事件和标准事件都定义了这2个属性 event.pageX、event.pageY 类似于event.clientX、event.clientY，但它们使用的是文档坐标而非窗口坐标。这2个属性不是标准属性，但得到了广泛
clientX/clientY 与 screenX/screenY 的区别
蚂蚁的洞
08-31 6272
clientX/clientY 、 screenX/screenY 、pageX/pageY 与offsetX/offsetY的区别
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

前端OnTheRun

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值