screenX clientX pageX概念

最新推荐文章于 2024-12-17 10:08:13 发布
最新推荐文章于 2024-12-17 10:08:13 发布
阅读量818 收藏
点赞数
CC 4.0 BY-SA版权
分类专栏： javascript 文章标签： javascript clientX screenX pageX
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/wjping11360/article/details/26220889
本文详细解释了在网页交互中用于获取鼠标位置的几种关键属性，包括screenX/screenY、clientX以及pageX等。这些属性分别对应不同的参照点，如屏幕左上角或浏览器内容区左上角，并探讨了它们随滚动条变化的情况。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

screenX:鼠标位置相对于用户屏幕水平偏移量，而screenY也就是垂直方向的，此时的参照点也就是原点是屏幕的左上角。

clientX:跟screenX相比就是将参照点改成了浏览器内容区域的左上角，该参照点会随之滚动条的移动而移动。

pageX：参照点也是浏览器内容区域的左上角，但它不会随着滚动条而变动

如图(红点就是鼠标当前位置)

HTML中的screenX的区别
CbrFullstack的博客
10-03 241
这两个属性在大多数现代浏览器中是等效的，它们都返回窗口左边缘相对于屏幕左边缘的像素距离。在HTML中，screenX是一个用于获取浏览器窗口相对于用户屏幕左边缘的水平位置的属性。在上面的示例代码中，我们首先创建了一个带有id为"windowX"的span元素，用于显示窗口的水平位置。然后，使用JavaScript代码获取窗口的水平位置，并将其赋值给span元素的textContent属性，从而在页面上显示出来。然而，需要注意的是，screenX属性与窗口大小无关，它仅提供了窗口位置相关的信息。
clientX、offsetX、screenX、pageX、x的区别
我的blog屋
05-30 1073
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
JS client(X,Y)、screen(X,Y)、page（X,Y）的区别
weixin_30359021的博客
12-29 301
clientX：光标相对于当前窗口的水平位置； clientY :光标相对于当前窗口的垂直位置； screenX :光标相对于该屏幕的水平位置； screenY：光标相对于该屏幕的垂直位置； pageX :光标相对于当前文档的水平位置； pageY ：光标相对于当前文档的垂直位置； 转载于:https://www.cnblogs.com/zhang-wang/p/6233083.html...
2022-03-27 screenX和clientX的区别以及offsetX和pageX的区别
GAARA
03-27 1379
1.screenX和clientX的区别 screenX是电脑显示器原点(显示器左上角)到鼠标点击位置的距离 clientX是可视化窗口原点(网页左上角)到鼠标点击位置的距离 2.offsetX和pageX的区别 offsetX是事件源原点(div左上角)到鼠标点击位置的距离 pageX是水平滚动条的距离(如果有的话)+clientX ...
clintx offsetx screenx 的剖析
qq_27970999的博客
04-10 434
event.clientX、event.clientY鼠标相对于浏览器窗口可视区域的X，Y坐标（窗口坐标），可视区域不包括工具栏和滚动条。IE事件和标准事件都定义了这2个属性event.pageX、event.pageY类似于event.clientX、event.clientY，但它们使用的是文档坐标而非窗口坐标。这2个属性不是标准属性，但得到了广泛支持。IE事件中没有这2个属性。event.o...
js里面关于位置坐标的总结
adobe1992
07-25 1048
HTML精确定位:scrollLeft,scrollWidth,clientWidth,offsetWidth  scrollHeight: 获取对象的滚动高度。  scrollLeft:设置或获取位于对象左边界和窗口中目前可见内容的最左端之间的距离  scrollTop:设置或获取位于对象最顶端和窗口中可见内容的最顶端之间的距离  scrollWidth:获取对象的滚动宽度  offs
clientX,pageX,offsetX,x,layerX,screenX,offsetLeft区别分析
09-05
`clientX`, `pageX`, `offsetX`, `x`, `layerX`, `screenX`, 和 `offsetLeft` 是JavaScript中用于描述鼠标位置和元素相对位置的一系列属性。下面我们将详细分析这些属性的区别和应用场景。 1. **screenX**: 这个...
[转]分析x,offsetX clientX screenX,pageX,y,offsetY clientY screenY,pageY之间的区别
03-17
在JavaScript中，处理鼠标事件时，经常会遇到一系列与鼠标位置相关的属性，如`x`, `offsetX`, `clientX`, `screenX`, `pageX`, `y`, `offsetY`, `clientY`, `screenY`, `pageY`等。这些属性在不同的上下文下提供了...
详解x,offsetX clientX screenX,pageX与y,offsetY clientY screenY,pageY的区别
为了准确获取鼠标相对于不同坐标系的位置，HTML提供了多种属性，如offsetX,clientX,screenX,pageX,y,offsetY,clientY,screenY,pageY等。本文将详细分析这些属性之间的区别及其在开发中的应用场景。 ### offsetX和...
js-事件1_获取鼠标坐标clientX+scrollLeft及兼容性写法_跟随鼠标移动的divs
weixin_30885111的博客
07-27 264
一、获取鼠标坐标 　　clientX：鼠标到可视区边缘的距离； scrollLeft:滚动条到页面顶端的距离（不可视区的距离） 　　兼容性写法： 　　var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;var scrollLeft = document.documentE...
PageX、clientX、screenX、offsetX、layerX的区别
qq_45044074的博客
03-08 7835
一.PageX和clientX PageX:鼠标在页面上的位置,从页面左上角开始,即是以页面为参考点,不随滑动条移动而变化clientX:鼠标在页面上可视区域的位置,从浏览器可视区域左上角开始,即是以浏览器滑动条此刻的滑动到的位置为参考点,随滑动条移而变化. 二.screenX screenX:鼠标在屏幕上的位置,从屏幕左上角开始,这个没有任何争议 三.offsetX和layerX offsetX:IE特有,鼠标相比较于触发事件的元素的位置,以元素盒子模型的内容区域的左上角为参考点,如果有bode
screenX clientX pageX的区别
weixin_44011751的博客
07-20 840
screenX:鼠标位置相对于用户屏幕水平偏移量，而screenY也就是垂直方向的，此时的参照点也就是原点是屏幕的左上角。(简单的说就是电脑桌面的左边到当前鼠标点的距离) clientX:跟screenX相比就是将参照点改成了浏览器内容区域的左上角，该参照点会随之滚动条的移动而移动。(就是浏览器可视区域左边和上边到当前点的距离,不包含滚动条遮着的区域) pageX：参照点也是浏览器内容区域的左上角，但它不会随着滚动条而变动 如图(红点就是鼠标当前位置,pageX就是整个文档包括滚动区域左边上边到该点的位置.
元素偏移量offset系列及e.pageX(e.pageY)
katherin_wanzi的博客
07-14 1503
1.offset概述 注意：目标元素的父元素要有定位，否则偏移量为目标元素与元素之间的距离 2.offset与style的区别 3.e.pageX和e.pageY 目标元素在浏览器中的位置 案例 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initi
js怎么控制textarea滚动条定位在光标的位置
王旭东
05-27 1457
  如题：先blur，后focus。                                                        
原生js获取鼠标在盒子上的位置pageX、pageY、offsetTop、offsetLeft
u010234868的专栏
07-06 1438
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> body { margin: 0; /*添加高度使其出现滚动条*/ height: 1000px; } #box { width: 200px; height: 200px; bac.
js计算滚轮滚动到导航组件时吸顶
qq_41411324的博客
02-03 410
页面： 吸顶方法：
理解screenX clientX pageX概念
weixin_30832143的博客
01-04 157
先了解screenX,clientX,pageX概念 screenX: 鼠标位置相对于用户屏幕水平偏移量，而screenY就是垂直方向的，此时的参照点也就是原点是屏幕的左上角。 clientX: 跟screenX相比就是将参照点改成了浏览器内容区域的左上角，该参照点不会随之滚动条的移动而移动。 pageX： 参照点也是浏览器内容区域的左上角，但它会随着滚动条而变动 下面看看具体的各个对象中的...
JavaScript Screen 对象详解：获取浏览器窗口的屏幕信息
最新发布
前端梦工厂
12-17 1210
JavaScript Screen 对象是一个强大的工具，在前端开发中有着泛的应用。它为我们提供了丰富的屏幕信息和操作控制，可以帮助我们更好地适配不同的屏幕尺寸和设备通过合理利用 Screen 的属性和方法，我们为用户提供更好的体验，同时也提高了我们的开发效率。
pageX、pageY及父元素的页面坐标使提示框跟随鼠标移动
lzf的博客
08-08 1486
提示框相对父元素的定位，要计算提示框的left和top属性。所以公式应该为提示框的相对坐标=鼠标的页面坐标-父元素的页面坐标 计算鼠标的页面坐标： event.pageX event.pageY 计算父元素的页面坐标： 首先写一个js获取元素到页面顶部距离的方法
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值