JS元素坐标定位 screenX clientX pageX概念

最新推荐文章于 2022-03-27 18:25:48 发布
转载 最新推荐文章于 2022-03-27 18:25:48 发布 · 1.1k 阅读 · 0

本文详细解释了screenX、clientX及pageX等鼠标位置属性的概念及其区别。screenX和screenY表示相对于屏幕左上角的位置；clientX表示相对于浏览器内容区域左上角的位置，并随滚动条移动；pageX同样基于浏览器内容区域左上角但不随滚动条移动。

screenX clientX pageX概念

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

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

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

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

clientX、offsetX、screenX、pageX、x的区别
我的blog屋
05-30 1118
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
screenX clientX pageX概念
wjping11360的专栏
05-19 840
screenX:鼠标位置相对于用户屏幕水平偏移量，而screenY也就是垂直方向的，此时的参照点也就是原点是屏幕的左上角。 clientX:跟screenX相比就是将参照点改成了浏览器内容区域的左上角，该参照点会随之滚动条的移动而移动。 pageX：参照点也是浏览器内容区域的左上角，但它不会随着滚动条而变动 如图(红点就是鼠标当前位置) clientX pageX概念" a
JS client(X,Y)、screen(X,Y)、page（X,Y）的区别
weixin_30359021的博客
12-29 320
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 1397
1.screenX和clientX的区别 screenX是电脑显示器原点(显示器左上角)到鼠标点击位置的距离 clientX是可视化窗口原点(网页左上角)到鼠标点击位置的距离 2.offsetX和pageX的区别 offsetX是事件源原点(div左上角)到鼠标点击位置的距离 pageX是水平滚动条的距离(如果有的话)+clientX ...
clintx offsetx screenx 的剖析
qq_27970999的博客
04-10 451
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 1062
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**: 这个...
浅谈clientX、offsetX、screenX、pageX
漫磋嗟
10-24 2969
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和...
js-事件1_获取鼠标坐标clientX+scrollLeft及兼容性写法_跟随鼠标移动的divs
weixin_30885111的博客
07-27 279
一、获取鼠标坐标 　　clientX：鼠标到可视区边缘的距离； scrollLeft:滚动条到页面顶端的距离（不可视区的距离） 　　兼容性写法： 　　var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;var scrollLeft = document.documentE...
javascript中的offsetWidth、clientWidth、innerWidth及相关属性方法
盏茶作酒的博客
09-23 268
****** 元素视图属性 * offsetWidth 水平方向 width + 左右padding + 左右border-width * offsetHeight 垂直方向 height + 上下padding + 上下border-width * * clientWidth 水平方向 width + 左右padding * cli...
PageX、clientX、screenX、offsetX、layerX的区别
qq_45044074的博客
03-08 7931
一.PageX和clientX PageX:鼠标在页面上的位置,从页面左上角开始,即是以页面为参考点,不随滑动条移动而变化clientX:鼠标在页面上可视区域的位置,从浏览器可视区域左上角开始,即是以浏览器滑动条此刻的滑动到的位置为参考点,随滑动条移而变化. 二.screenX screenX:鼠标在屏幕上的位置,从屏幕左上角开始,这个没有任何争议 三.offsetX和layerX offsetX:IE特有,鼠标相比较于触发事件的元素的位置,以元素盒子模型的内容区域的左上角为参考点,如果有bode
screenX clientX pageX的区别
weixin_44011751的博客
07-20 867
screenX:鼠标位置相对于用户屏幕水平偏移量，而screenY也就是垂直方向的，此时的参照点也就是原点是屏幕的左上角。(简单的说就是电脑桌面的左边到当前鼠标点的距离) clientX:跟screenX相比就是将参照点改成了浏览器内容区域的左上角，该参照点会随之滚动条的移动而移动。(就是浏览器可视区域左边和上边到当前点的距离,不包含滚动条遮着的区域) pageX：参照点也是浏览器内容区域的左上角，但它不会随着滚动条而变动 如图(红点就是鼠标当前位置,pageX就是整个文档包括滚动区域左边上边到该点的位置.
元素偏移量offset系列及e.pageX(e.pageY)
katherin_wanzi的博客
07-14 1535
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 1478
  如题：先blur，后focus。                                                        
原生js获取鼠标在盒子上的位置pageX、pageY、offsetTop、offsetLeft
u010234868的专栏
07-06 1462
<!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 436
页面： 吸顶方法：
理解screenX clientX pageX概念
weixin_30832143的博客
01-04 177
先了解screenX,clientX,pageX概念 screenX: 鼠标位置相对于用户屏幕水平偏移量，而screenY就是垂直方向的，此时的参照点也就是原点是屏幕的左上角。 clientX: 跟screenX相比就是将参照点改成了浏览器内容区域的左上角，该参照点不会随之滚动条的移动而移动。 pageX： 参照点也是浏览器内容区域的左上角，但它会随着滚动条而变动 下面看看具体的各个对象中的...
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值