终于搞懂这些的区别了 clientX、offsetX、screenX、pageX

最新推荐文章于 2022-10-21 10:37:16 发布
原创 最新推荐文章于 2022-10-21 10:37:16 发布 · 424 阅读 · 3 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#offsetX #pageX #clientX

博客涉及offsetX、pageX、clientX相关内容，但具体内容缺失。这些是信息技术领域前端开发中与鼠标位置相关的属性。

clientX、offsetX、screenX、pageX、x的区别
我的blog屋
05-30 1116
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
clientX、offsetX、screenX、pageX的区别
Serena_tz的博客
02-22 5881
一、概念总结 1、event.clientX、event.clientY 鼠标相对于浏览器窗口可视区域的X，Y坐标（窗口坐标），可视区域不包括工具栏和滚动条。IE事件和标准事件都定义了这2个属性.clientX指可视区域内离左侧的距离，以滚动条滚动到的位置为参考点。各个浏览器相同。即当有滚动条时clientX 小于 pageX。 2、event.pageX、event.pageY 类似于event.clientX、event.clientY，但它们使用的是文档坐标而非窗口坐标。这2个属性不是标准属性，但得到
clientX、screenX、offsetX区别
LLL_liuhui的博客
06-04 480
1、clientX/clientY clientX: 鼠标相对于浏览器文档显示区的水平X坐标,不包括工具栏和滚动条 clientY:鼠标相对于浏览器文档显示区的垂直Y坐标,不包括工具栏和滚动条 2、screenX/screenY screenX:鼠标相对于显示器屏幕的水平X坐标,不包括滚动条 screenY:鼠标相对于显示器屏幕的垂直Y坐标,不包括滚动条 3、offsetX/offse...
clientX, clientY | offsetX, offsetY | pageX, pageY的区别：
YY的博客
10-21 1692
clientX, clientY | offsetX, offsetY | pageX, pageY的区别：
彻底搞懂 offsetX、scrollX、clientX 的区别
热门推荐
lefex的博客
03-05 2万+
无论在 iOS 还是前端开发中，关于如何定位一个元素是必须要掌握的知识，而在前端中，元素定位比较难理解，我们今天一起学习下。在 DOM 设计中，主要通过这些 API 来确定某个元素的具体...
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 2957
clientX、offsetX相对于鼠标事件对象，需要触发鼠标事件才会有clientX、offsetX。 clientX：当事件被触发时鼠标指针相对于窗口左边界的水平坐标,参照点为浏览器内容区域的左上角，该参照点会随之滚动条的移动而移动。 offsetX：当事件被触发时鼠标指针相对于所触发的标签元素的左内边框的水平坐标。 screenX：鼠标位置相对于用户屏幕水平偏移量，此时的参照点也就是原点是屏幕的左上角。 pageX：参照点是页面本身的body原点，而不是浏览器内容区域左上角，它计算的值不会随着滚动条而
[转]分析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和...
pageX,clientX,offsetX,layerX的区别
大鹏
02-17 3662
在各个浏览器的JS中,有很多个让你十分囧的属性,由于各大厂商对标准的解释和执行不一样,导致十分混乱,也让我们这些前端攻城狮十分无语和纠结>_ John Resig大神说过,动态元素有3个至关重要的元素,位置,尺寸和可见性.所以,今天,先拿几个页面位置属性开刀. 一.PageX和clientX PageX和clientX ,这个两个比较容易搞混, PageX:鼠标在页面上的位置,
图解Js event对象offsetX, clientX, pageX, screenX, layerX, x区别
wangqiuchen_Study的专栏
03-09 569
通过 3 张图和 1 张表格，轻松区别 JavaScript Event 对象中的offsetX, clientX, pageX, screenX, layerX, x等属性。 一、测试代码如下： >   html lang="zh-cn">   head>   meta charset="utf-8" />   title>Javascripttitle>
screenX clientX pageX的区别
weixin_44011751的博客
07-20 863
screenX:鼠标位置相对于用户屏幕水平偏移量，而screenY也就是垂直方向的，此时的参照点也就是原点是屏幕的左上角。(简单的说就是电脑桌面的左边到当前鼠标点的距离) clientX:跟screenX相比就是将参照点改成了浏览器内容区域的左上角，该参照点会随之滚动条的移动而移动。(就是浏览器可视区域左边和上边到当前点的距离,不包含滚动条遮着的区域) pageX：参照点也是浏览器内容区域的左上角，但它不会随着滚动条而变动 如图(红点就是鼠标当前位置,pageX就是整个文档包括滚动区域左边上边到该点的位置.
JavaScript --- 移动端事件
xyue_的博客
05-26 283
触屏事件 1.兼容DOM的触摸事件 touchstart — 当手指触摸屏幕时触发 touchmove — 当手指在屏幕上滑动时连续触发 touchend — 当手指从屏幕上移开时触发 touchcancel — 当系统停止跟踪触摸时触发 上述事件都会冒泡，也都可以取消。每个触摸事件的event对象都提供了在鼠标事件中常见的属性bubbles cancelable view clientX clientY screenX screenY等 2、每个触摸事件包含的三个触摸列表 touches — 当前跟
关于screenX、clientX、pageX, offsetX的相关介绍
老衲的少女心i~
04-07 635
概念 1. offsetX 和offsetY offsetX ：鼠标点击位置相对于触发事件对象的水平距离 offsetY：鼠标点击位置相对于触发事件对象的垂直距离 2. clientX 和clientY clientX：返回当事件被触发时鼠标指针向对于浏览器页面（客户区）的水平坐标。 客户区指的是当前窗口。（不会计算水平滚动的距离） clientY：返回当事件被触发时鼠标指针向对于浏览器页面（客户区）的垂直坐标。 客户区指的是当前窗口。（不会计算垂直滚动的距离） 3. pageX 和pageY
clientX,screenX,pageX,offsetX的异同
weixin_33904756的博客
04-09 118
pageX/pageY: 鼠标相对于整个页面的X/Y坐标。注意，整个页面的意思就是你整个网页的全部，比如说网页很宽很长，宽2000px，高3000px，那pageX,pageY的最大值就是它们了。 特别说明：IE不支持！ offsetX/offsetY: 得出的结果跟pageX/pageY一样，既然如此，它有什么存在价值？因为： 特别说明：只有IE支持！相当于IE下的pageX,page...
利用canvas画图
nick_zhang的博客
02-09 966
canvas
touch.pageX/touch.screenX/touch.clientX的区别
qq_33390316的博客
03-17 1452
摘定义： pageX : 触点相对于HTML文档左边沿的的X坐标. 和 clientX 属性不同, 这个值是相对于整个html文档的坐标, 和用户滚动位置无关. 因此当存在水平滚动的偏移时, 这个值包含了水平滚动的偏移. screenX : 返回触点相对于屏幕左边沿的的X坐标. 不包含页面滚动的偏移量. clientX : 返回触点相对于可见视区(visual viewport)左边沿的的X坐标. 不包括任何滚动偏移.这个值会根据用户对可见视区的缩放行为而发生变化. 具体差别如下： 做了一个带滚动条的dem
鼠标事件中的位置相关的属性ScreenX,ClientX,pageX,layerX,offsetX
Evita
09-01 156
定义 鼠标事件中属性和键盘相关的属性 srceenX(通用属性)相对于屏幕左上角的位置 clientX(通用属性)相对于浏览器的可视区域(浏览器窗口左上角)，不包括滚动条 pageX(非标准属性，IE9以上支持)相对于整个文档，包括滚动条 layerX(非标准属性，IE9以上支持)对于当前事件结点而言，本身或者父元素有position:absolute/relative有定位点, 表示鼠标...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值