clientX、pageX、screenX以及offsetX区别

最新推荐文章于 2023-07-05 15:40:48 发布
最新推荐文章于 2023-07-05 15:40:48 发布
阅读量1.5k 收藏 5
点赞数
分类专栏： 前端 文章标签： 前端 javascript html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_42178670/article/details/127583063
版权

clientX、pageX、clientX以及offsetX区别

client系列（不包含滚动条）

clientX：鼠标相对于浏览器窗口可视区域x方向坐标
clientY：鼠标相对于浏览器窗口可视区域y方向坐标

page系列（包含滚动条）

pageX：鼠标相对于页面x方向坐标（页面包括被滚动条卷去的部分）
pageY：鼠标相对于页面y方向坐标（页面包括被滚动条卷去的部分）

screen系列

screenX：鼠标相对于电脑屏幕x方向坐标
screenY：鼠标相对于电脑屏幕y方向坐标

offset系列

offsetX：鼠标相对于事件源元素的x坐标
offsetY：鼠标相对于事件源元素的Y坐标

layer系列（包含滚动条）

鼠标相对于当前坐标系的定位，即如果触发鼠标事件元素未设置绝对定位或者相对定位，则相对于文档的定位坐标。如果触发元素设置了绝对定位或者相对定位，则返回相对于触发元素的定位坐标
如果触发元素有定位:
layerX = offsetX, layerY = offsetY
如果触发元素没有定位：
layerX = pageX，layerY = pageY

示意图

在这里插入图片描述

给贝贝赚口粮
关注
  • 0
    点赞
  • 踩
  • 5
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
[转]分析x,offsetX clientX screenX,pageX,y,offsetY clientY screenY,pageY之间的区别
03-17
在JavaScript中，处理鼠标事件时，经常会遇到一系列与鼠标位置相关的属性，如`x`, `offsetX`, `clientX`, `screenX`, `pageX`, `y`, `offsetY`, `clientY`, `screenY`, `pageY`等。这些属性在不同的上下文下提供了...
鼠标事件clientX、clientY
04-21
clientX、clientY、pageX、pageY、screenX、screenY、offsetX、offsetY
JS中 PageX、clientX、offsetX、layerX、offsetTop、offsetWidth各位置属性详解
最新发布
qq_43631129的博客
07-05 6817
PageX、clientX、offsetX、layerX、offsetTop、offsetWidth各位置属性详解
PageX、clientX、screenX、offsetX、layerX的区别
qq_45044074的博客
03-08 7708
一.PageX和clientX PageX:鼠标在页面上的位置,从页面左上角开始,即是以页面为参考点,不随滑动条移动而变化clientX:鼠标在页面上可视区域的位置,从浏览器可视区域左上角开始,即是以浏览器滑动条此刻的滑动到的位置为参考点,随滑动条移而变化. 二.screenX screenX:鼠标在屏幕上的位置,从屏幕左上角开始,这个没有任何争议 三.offsetX和layerX offsetX:IE特有,鼠标相比较于触发事件的元素的位置,以元素盒子模型的内容区域的左上角为参考点,如果有bode
pageX,clientX,screenX,offsetX区别
weixin_43368552的博客
08-22 292
注意，整个页面的意思就是你整个网页的全部，比如说网页很宽很长，宽2000px，高3000px，那pageX,pageY的最大值就是它们了。特别说明：IE下此属性不规范，它们的最小值不是0而是2，也就是说IE下的clientX/clientY比火狐下始终大2px。当你将浏览器窗口缩小时，clientX/clientY的最大值也会缩小，但始终，它们的最大值不会超过你浏览器可视区域。浏览器内容区域即浏览器窗口中用来显示网页的可视区域，注意这个可视，也就是说需要拖动滚动条才能看到的区域不算。特别说明：IE不支持！
clientX、pageX、screenX、offsetX、layerX的区别
明日晴空的博客
05-04 937
        screenX，screenY：鼠标相对于用户显示器屏幕左上角的坐标； pageX，pageY：鼠标相对于文档左上角的坐标，pageY=clientY+scrollY clientX，clientY：鼠标相对于当前浏览器窗口左上角的坐标，pageY=clientY+scrollY offsetX，offsetY：鼠标相对于触发事件的元素位置内容区左上角的坐标； layerX，lay...
pageX、clientX、screenX、offsetX、layerX、x 在不同浏览器上的使用及区别
YUaNAiShU的博客
11-29 730
    文章转自：https://blog.csdn.net/MOONCOM/article/details/52983334 chrome： e.pageX——相对整个页面的坐标 e.layerX——相对当前坐标系的border左上角开始的坐标 e.offsetX——相对当前坐标系的border左上角开始的坐标 e.clientX——相对可视区域的坐标 e.x——相对可视区域的坐标 f...
【转载】pageX,clientX,screenX,offsetX区别
庭落
07-14 176
pageX/pageY: 鼠标相对于整个页面的X/Y坐标。 注意，整个页面的意思就是你整个网页的全部，比如说网页很宽很长，宽2000px，高3000px，那pageX,pageY的最大值就是它们了。 ** 特别说明：IE不支持！ ** clientX/clientY： 事件发生时鼠标在浏览器内容区域的X/Y坐标（不包含滚动条）。 浏览器内容区域即浏览器窗口中用来显示网页的可视区域，注意这个可视，...
clientX,screenX,pageX,offsetX的区别
想搞全栈的前端
06-17 4388
前言 关于clientX,screenX,pageX,offsetX的区别之前也比较迷糊，然后自己写了几个demo算是弄明白了，在这记录一下。 定义 一、clientX、clientY 点击位置距离当前body可视区域的x，y坐标。 可以理解为距离浏览器窗口的距离，但注意这里不包括浏览器的导航栏距离只是浏览器内容区域。 二、pageX、pageY 对于整个页面来说，包括了被卷去的body部分的长度...
js事件坐标大乱斗：screenX、clientX、pageX、offsetX
weixin_40581714的博客
07-06 1193
screenX: 鼠标相对于电脑屏幕的X坐标 screenY: 鼠标相对于电脑屏幕的Y坐标 clientX/clientY: 鼠标的坐标到可视区域的坐标，比如在谷歌浏览器中，指工具栏之下的区域。注意跟页面滚动无关，因为浏览器本身不滚动 pageX/pageY: 鼠标相对于整个网页主题左上角的坐标。会受到滚动影响。当无滚动时，跟client是一样的值 offsetX/offsetY： 事件发生时鼠标相对于事件源元素的坐标，获取数据类似pageX/Y，但是受到子元素影响。意思就是pageX/Y总是相对于网
clientX、offsetX、screenX、pageX的区别
Serena_tz的博客
02-22 3300
一、概念总结 1、event.clientX、event.clientY 鼠标相对于浏览器窗口可视区域的X，Y坐标（窗口坐标），可视区域不包括工具栏和滚动条。IE事件和标准事件都定义了这2个属性.clientX指可视区域内离左侧的距离，以滚动条滚动到的位置为参考点。各个浏览器相同。即当有滚动条时clientX 小于 pageX。 2、event.pageX、event.pageY 类似于event.clientX、event.clientY，但它们使用的是文档坐标而非窗口坐标。这2个属性不是标准属性，但得到
clientX,pageX,offsetX,x,layerX,screenX,offsetLeft区别分析
09-05
`clientX`, `pageX`, `offsetX`, `x`, `layerX`, `screenX`, 和 `offsetLeft` 是JavaScript中用于描述鼠标位置和元素相对位置的一系列属性。下面我们将详细分析这些属性的区别和应用场景。 1. **screenX**: 这个...
JS中坐标表示方法的异同
03-17
本文将详细介绍`clientX`、`screenX`、`pageX`、`offsetX`等坐标系统的概念及其差异，并通过实例来帮助理解这些概念。 #### 二、`pageX`与`pageY` **定义：** `pageX`与`pageY`表示鼠标相对于整个文档的X轴和Y轴的...
箭头函数及其this指向
weixin_42178670的博客
04-10 6157
箭头函数 1、只有一个参数的时候，参数可以不加小括号，没有参数或2个及以上参数的，必须加上小括号 2、返回语句只有一条的时候可以不写{}和return，会自动加上return的，返回多条语句时必须加上{}和return 3、箭头函数在返回对象的时候必须在对象外面加上小括号 箭头函数的this指向和普通函数的区别 1、普通函数this指向： 指向它的调用者，如果没有调用者则默认指向window 2、箭头函数指向： 指向箭头函数定义的时候所处的对象，而不是其所使用的时候所处的对象，默认指向父级的this 综上：
fixed定位之后出现宽度溢出问题解决
weixin_42178670的博客
08-20 5744
fixed定位之后出现宽度溢出问题解决 fixed定位之后，元素相对的定位是windows，往往会导致宽度溢出容器，解决办法如下： 在父元素中设置：transform:translate(0,0) 即可解决
让浮动元素居中的几种方法
weixin_42178670的博客
05-19 3932
让浮动元素居中的几种方法 方法一： 给浮动元素外层包裹一个div,这个div和浮动元素宽度一致，然后对这个div设置margin: 0 auto; -------html------- <div class="container-layout"> <div class="content clearfix"> <div class="float-item">float-item</div> </div> </di
前端页面倒计时+自动跳转功能（setTimeout和setTimeInterval两种实现）
weixin_42178670的博客
03-09 3168
<!-- 8秒倒计时 --> <p><span id="time"></span>秒后自动跳转到老版本</p> <!-- js部分 --> function countDown(secs, url) { // secs--设置倒计时秒数，url--要跳转的链接 var time = document.getElementById("time") time.innerHTML = secs // 页面上显示所设定的倒计时时长 if
table表格单元格的宽度计算规则
weixin_42178670的博客
07-12 3045
表格的计算方式包括两种：固定表格布局和自动表格布局 如果设置了border-collapse:separate; 需提前设置 table { border-spacing: 0; }，不设置的话会出现tr比table小4px（默认border-spacing: 2px;），如果设置border-collapse: collapse;则不需要设置border-spacing 为了更好的对比，先量出样本内容宽度为117.73px（下面会用到这一串文字作为填充内容） 如果table和td均设置了border之后
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、付费专栏及课程。

余额充值