clientX,offectX,screenX的区别：

最新推荐文章于 2023-09-01 20:50:14 发布
原创 最新推荐文章于 2023-09-01 20:50:14 发布 · 378 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

博客介绍了三个与光标距离相关的参数。clentX 是光标距浏览器可视区域左上角的距离，screenX 是光标距显示器左上角的距离，offectX 是光标距当前元素左上角的距离。

clentX:光标距离浏览器可视区域的左上角距离。
screenX:光标距离显示器的左上角距离
offectX:光标距离当前元素左上角的距离。。

深刻认识clientX，offsetX，screenX
weinideai的专栏
02-13 1万+
概念（来源于网络）：clientX 设置或获取鼠标指针位置相对于当前窗口的 x 坐标，其中客户区域不包括窗口自身的控件和滚动条。 clientY 设置或获取鼠标指针位置相对于当前窗口的 y 坐标，其中客户区域不包括窗口自身的控件和滚动条。 offsetX 设置或获取鼠标指针位置相对于触发事件的对象的 x 坐标。 offsetY 设置或获取鼠标指针位置相对于触发事件的对象的 y 坐标。 scre
浏览器的鼠标坐标值获取及pageX、clientX、screenX的差异
chenqiong1991的博客
04-05 1749
写在前面获取方法比较简单。重点在于理解三种值的实际意义。代码<p><strong>screen:</strong><span id="screen"></span></p> <p><strong>client:</strong><span id="client"></span></p> <p><strong>page:</strong><span id="page"></span></p> 三个
DOM的OffsetX、ClientX和ScrollX
mole的专栏
09-17 1685
点击 内部div的各层宽度如上图。 var b = document.getElementById('b'); console.log ('b.offsetLeft=' + b.offsetLeft) // 13 console.log ('b.clientLeft=' + b.clientLeft) // 5 console.log ('b.scrollLeft=' + b.scr
浅谈clientX、offsetX、screenX、pageX
漫磋嗟
10-24 2886
clientX、offsetX相对于鼠标事件对象，需要触发鼠标事件才会有clientX、offsetX。 clientX：当事件被触发时鼠标指针相对于窗口左边界的水平坐标,参照点为浏览器内容区域的左上角，该参照点会随之滚动条的移动而移动。 offsetX：当事件被触发时鼠标指针相对于所触发的标签元素的左内边框的水平坐标。 screenX：鼠标位置相对于用户屏幕水平偏移量，此时的参照点也就是原点是屏幕的左上角。 pageX：参照点是页面本身的body原点，而不是浏览器内容区域左上角，它计算的值不会随着滚动条而
JavaScript 中一些概念理解 ：clientX、clientY、offsetX、offsetY、screenX、screenY
甜心的专栏
11-11 7704
clientX：设置或获取鼠标指针位置相对于窗口客户区域的 x 坐标，其中客户区域不包括窗口自身的控件和滚动条。 clientY： 设置或获取鼠标指针位置相对于窗口客户区域的 y 坐标，其中客户区域不包括窗口自身的控件和滚动条。 offsetX： 设置或获取鼠标指针位置相对于触发事件的（this）对象的 x 坐标。 offsetY ：设置或获取鼠标指针位置相对于触发事件的（this）对象的 y 坐标。 screenX： 设置或获取获取鼠标指针位置相对于用户屏幕的 x 坐标。 screenY： 设.
区分clientX、offsetX、pageX、screenX
Daisy花园
02-22 1030
以前一直以为写了这几个属性的区分的，今天再来看居然没有写。 不过这个还是很有用的。这里再来总结一下。所有解释都在图里面。这里再来文字解释一下，图中至标注了Y的值，X同理。clientX clientYevent.clientX event.clientYclient直译就是客户端，客户端的窗口就是指游览器的显示页面内容的窗口大小（不包含工具栏、导航栏等等）。event.clientX、event
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的区别
- 与`clientX`和`clientY`的区别在于，`pageX`和`pageY`考虑了滚动条的位置，因此它们可以用来获取相对于整个文档的精确位置。 - 该属性适用于需要在页面滚动时追踪鼠标的精确位置的场景。 ### y和X - `X`和`Y`...
pagyX/Y、clientX/Y、offsetX/Y、screenX/Y；clientHeight、scrollHeight、scrollTop；offsetHeight、offsetTop+滑动条
m0_56029970的博客
09-01 173
JavaScript尺寸和位置的理解，外加简易滑动条实例
彻底搞懂 offsetX、scrollX、clientX 的区别
lefex的博客
03-05 2万+
无论在 iOS 还是前端开发中，关于如何定位一个元素是必须要掌握的知识，而在前端中，元素定位比较难理解，我们今天一起学习下。在 DOM 设计中，主要通过这些 API 来确定某个元素的具体...
js父元素获取子元素img_JS
weixin_30304773的博客
12-29 552
点击蓝色名字关注获取最新文章JavaScriptJavaScriptjs 基本数据类型js 遍历对象和遍历数组的方式遍历对象遍历数组null 和 undefined 的区别其他值到字符串的转换规则其他值到数字值的转换规则其他值到布尔类型的值的转换规则{} 和 [] 的 valueOf 和 toString 的结果是什么什么情况下会发生布尔值的隐式强制类型转换|| 和 &&...
clientX、offsetX、screenX、pageX的区别
Serena_tz的博客
02-22 5718
一、概念总结 1、event.clientX、event.clientY 鼠标相对于浏览器窗口可视区域的X，Y坐标（窗口坐标），可视区域不包括工具栏和滚动条。IE事件和标准事件都定义了这2个属性.clientX指可视区域内离左侧的距离，以滚动条滚动到的位置为参考点。各个浏览器相同。即当有滚动条时clientX 小于 pageX。 2、event.pageX、event.pageY 类似于event.clientX、event.clientY，但它们使用的是文档坐标而非窗口坐标。这2个属性不是标准属性，但得到
js计算滚轮滚动到导航组件时吸顶
qq_41411324的博客
02-03 414
页面： 吸顶方法：
pageX,clientX,screenX,offsetX区别
05-09 2万+
pageX/pageY: 鼠标相对于整个页面的X/Y坐标。 注意，整个页面的意思就是你整个网页的全部，比如说网页很宽很长，宽2000px，高3000px，那pageX,pageY的最大值就是它们了。 特别说明：IE不支持！ clientX/clientY： 事件发生时鼠标在浏览器内容区域的X/Y坐标（不包含滚动条）。 浏览器内容区域即浏览器窗口中用来显示网页的可视区域，注意这个可视，也
client X 起始点
chq11106004389的博客
09-19 352
client X 起始点如何计算
JavaScript 中 offsetWidth，offsetHeight，clientWidth，clientHeight 等属性归纳
hongtoushan的博客
03-07 907
JS中的offsetWidth、offsetHeight、clientWidth、clientHeight
JS之clientX,clientY,screenX,screenY,offsetX,offsetY区别测试
热门推荐
每天进步一点点
05-09 6万+
首先需要知道clientX,clientY,screenX,screenY,offsetX,offsetY 是鼠标事件对象下的几个属性， 之前也一直对这些属性搞的稀里糊涂，看文档上说的也是不太理解，反正看完一头雾水，所以自己动手亲自测试了一下；说一下自己的理解； clientX,clientY,screenX,screenY,offsetX,offsetY 这几个属性是“鼠标事件对象”下的属性
offsetX各种值总结
风起
08-05 2938
pageX: 页面X坐标位置 pageY: 页面Y坐标位置 screenX: 屏幕X坐标位置 screenY: 屏幕Y坐标位置 clientX: 鼠标的坐标到页面左侧的距离 clientY: 鼠标的坐标到页面顶部的距离 clientWidth：可视区域的宽度 clientHeight：可视区域的高度 offsetX：鼠标坐标到元素的左侧的距离 offsetY：鼠标坐标到元素的顶部的距离 offsetLeft： 该元素外边框距离包含元素内边框左侧的距离 offsetTop：该元素外边框距离包含元素内
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值