pageX- clientX- screenX-区别

最新推荐文章于 2023-09-26 16:31:10 发布
最新推荐文章于 2023-09-26 16:31:10 发布
阅读量170 收藏
点赞数
文章标签： html5 css3 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Holy_Q/article/details/77909902
版权
本文探讨了网页坐标系统中的screenX/Y,pageX/Y,clientX/Y三个坐标属性，它们分别基于电脑屏幕、文档绝对定位和可视区域定义。pageX/Y在IE678中不被支持，而clientX/Y则与固定定位相似。
摘要由CSDN通过智能技术生成

这里写图片描述

screen X screenY 是以我们的电脑屏幕 为基准点测量

pageX pageY 以我们的 文档 （绝对定位） 的基准点 对齐 ie678 不认识

clientX clientY 以 可视区域 为基准点 类似于 固定定位

Harry.Q
关注
clientX、offsetX、screenX、pageX、x的区别
我的blog屋
05-30 856
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
event对象的offsetX, clientX, pageX, screenX
hardly555的博客
11-01 884
现在需要对event对象的几大与坐标有关的属性做一个总结，以便于认识 offsetX|offsetY offsetX/Y获取到是触发点相对被触发dom的左上角距离(包括padding在内，不包括border)，不过左上角基准点在不同浏览器中有区别，以内容区左上角为基准点（不包括边框），如果触发点在边框border上会返回负值。 用途：待发现 clientX|clientY和pageX|pageY clientX|clientY这对坐标相对于窗口，从窗口的顶部/左侧边缘计算得出，类似于cs.
pageX,clientX,screenX,offsetX区别
热门推荐
05-09 2万+
pageX/pageY: 鼠标相对于整个页面的X/Y坐标。 注意，整个页面的意思就是你整个网页的全部，比如说网页很宽很长，宽2000px，高3000px，那pageX,pageY的最大值就是它们了。 特别说明：IE不支持！ clientX/clientY： 事件发生时鼠标在浏览器内容区域的X/Y坐标（不包含滚动条）。 浏览器内容区域即浏览器窗口中用来显示网页的可视区域，注意这个可视，也
clientX,pageX,screenX，offsetLeft，scrollTop
wjping11360的专栏
05-19 516
这个东西，以为理解了，今天彻底弄弄。 clientX 观点：鼠标相对于WINDOWS的坐标。 这里这个WINDOWS是指我们能看见的浏览器大小。所以不可能超过显示器的大小，如screen.width,screen.height 证明：点击获得clientX,clientY的大小，设置为图片定位的位置。 如果上面观点不成立，也就是这个坐标不是浏览器范围内的，例如是相对DOCUMENT的，那
screenX clientX pageX的区别
weixin_33795743的博客
11-11 189
screenX clientX pageX概念打开的pop窗口随着鼠标点击的dom元素而定位展示的js代码：e是click事件，o是pop窗口的宽度或高度，eventX = function (e, o) {  e = e || window.event;  o = o || 0;  x = e.pageX || e.clientX + document.body.scroolLeft;  ret...
理解screenX clientX pageX概念
weixin_30832143的博客
01-04 124
先了解screenX,clientX,pageX概念 screenX: 鼠标位置相对于用户屏幕水平偏移量，而screenY就是垂直方向的，此时的参照点也就是原点是屏幕的左上角。 clientX: 跟screenX相比就是将参照点改成了浏览器内容区域的左上角，该参照点不会随之滚动条的移动而移动。 pageX： 参照点也是浏览器内容区域的左上角，但它会随着滚动条而变动 下面看看具体的各个对象中的...
clientX,pageX,offsetX,x,layerX,screenX,offsetLeft区别分析
09-05
`clientX`, `pageX`, `offsetX`, `x`, `layerX`, `screenX`, 和 `offsetLeft` 是JavaScript中用于描述鼠标位置和元素相对位置的一系列属性。下面我们将详细分析这些属性的区别和应用场景。 1. **screenX**: 这个...
touch.pageX/touch.screenX/touch.clientX的区别
qq_33390316的博客
03-17 1258
摘定义： pageX : 触点相对于HTML文档左边沿的的X坐标. 和 clientX 属性不同, 这个值是相对于整个html文档的坐标, 和用户滚动位置无关. 因此当存在水平滚动的偏移时, 这个值包含了水平滚动的偏移. screenX : 返回触点相对于屏幕左边沿的的X坐标. 不包含页面滚动的偏移量. clientX : 返回触点相对于可见视区(visual viewport)左边沿的的X坐标. 不包括任何滚动偏移.这个值会根据用户对可见视区的缩放行为而发生变化. 具体差别如下： 做了一个带滚动条的dem
[转]分析x,offsetX clientX screenX,pageX,y,offsetY clientY screenY,pageY之间的区别
03-17
在JavaScript中，处理鼠标事件时，经常会遇到一系列与鼠标位置相关的属性，如`x`, `offsetX`, `clientX`, `screenX`, `pageX`, `y`, `offsetY`, `clientY`, `screenY`, `pageY`等。这些属性在不同的上下文下提供了...
js的clientX、pageX、screenX等方法来获取鼠标坐标详解
最新发布
weixin_41652495的博客
09-26 1723
记录js的clientX、pageX、screenX
pageX，clientX，screenX的区别
m0_38005587的博客
11-27 1844
clientX是指鼠标到当前页面X轴的距离，如果有滚动，这个参考点也会改变，还不能理解就想一下fixed定位就可以了； pageX是指鼠标到当前bodyX轴的距离，如果有滚动，参考点也不会变，如果position为absolute为例； screenX是鼠标到当前屏幕X轴的距离，不会改变，但不同的会有所不同；...
事件clientX、pageX、screenX、offsetX
m0_56436039的博客
04-29 516
clientX、clientY：点击位置距离当前body可视区域的x，y坐标可以理解为距离浏览器窗口的距离，但注意这里不包括浏览器的导航栏距离只是浏览器内容区域。 pageX、pageY：对于整个页面来说，包括了被卷去的body部分的长度相对于文档边缘,包含滚动条距离 screenX、screenY：点击位置距离当前电脑屏幕的x，y坐标 offsetX、offsetY：相对于带有定位的父盒子的x，y坐标 clientX：在水平方向上，鼠标指针距离浏览器左侧边缘的距离。（不包含滚动条） pageX：
pagex，screenx，clientx的区别
kateLi的专栏
07-09 1355
screenX：参照物为电脑的屏幕左上角，距离电脑屏幕的水平距离 clientX：参照物是内容区域左上角，距离内容区域左上角的水平距离，会随着滚动条的移动而移动 pageX：参照物也是内容区域的左上角，距离内容区域左上角的水平距离，但是不会随着滚动条的移动而移动
pageX和clientX
rihongliu的专栏
09-29 2133
摘自http://www.cnblogs.com/jicheng/p/5945057.html。 很好的说明pageX和clientX的问题。。。
pageX、clientX、screenX、offsetX、layerX、x
asd65285的专栏
10-16 460
chrome： e.pageX——相对整个页面的坐标 e.layerX——相对当前坐标系的border左上角开始的坐标 e.offsetX——相对当前坐标系的border左上角开始的坐标 e.clientX——相对可视区域的坐标 e.x——相对可视区域的坐标 ff： e.pageX——相对整个页面的坐标 e.layerX——相对当前坐标系的border左上角开始的坐标
screenX、clientX、pageX三者间的区别
qq_41818857的博客
03-31 653
screenX相当于鼠标事件触发时的位置到设备屏幕最左侧的距离。 clientX相当于鼠标事件触发时的位置到浏览器可视窗口的最左侧距离。 pageX相当于鼠标事件触发时的位置到body的最左侧距离,即: pageX = clientX + scrollLeft((滚动条滚动的水平距离)) ...
clientX、pageX、screenX以及offsetX区别
weixin_42178670的博客
10-29 1592
clientX：鼠标相对于浏览器窗口可视区域x方向坐标clientY：鼠标相对于浏览器窗口可视区域y方向坐标。
event对象中pageX/Y，clientX/Y，screenX/Y，offsetX/Y区别
SIMIN_1617的博客
06-20 548
由鼠标事件（MouseEvent）可以发现： 1、clientX、clientY 点击位置距离当前body可视区域的x，y坐标 2、pageX、pageY 对于整个页面来说，包括了被卷去的body部分的长度 3、screenX、screenY 点击位置距离当前电脑屏幕的x，y坐标 4、offsetX、offsetY 相对于带有定位的父盒子的x，y坐标 5、x、y 和screenX、sc...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值