clientX、offsetX、screenX、pageX、x的区别

最新推荐文章于 2023-07-05 15:40:48 发布
原创 最新推荐文章于 2023-07-05 15:40:48 发布 · 195 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

本文详细介绍了鼠标点击事件中五种不同类型的坐标系：clientX/clientY用于表示点击位置距离可视区域的距离；pageX/pageY则考虑了滚动条的影响，表示在整个页面中的位置；screenX/screenY记录了相对于屏幕左上角的位置；offsetX/offsetY是相对于触发事件元素的位置；最后X/Y与clientX/clientY相同。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

1.clientX,clientY

      点击位置距离当前body可是化区域的x,y坐标

2.pageX，pageY

      对于整个页面来说，包括了被卷去的body部分的长度

3.screenX，screenY 

      点击位置距离电脑屏幕的x,y坐标

4. offsetX,offsetY

       相对于父容器的x,y坐标

5. X，Y

       和clientX,clientY一样    

pageX,clientX,screenX,offsetX区别
05-09 2万+
pageX/pageY: 鼠标相对于整个页面的X/Y坐标。 注意，整个页面的意思就是你整个网页的全部，比如说网页很宽很长，宽2000px，高3000px，那pageX,pageY的最大值就是它们了。 特别说明：IE不支持！ clientX/clientY： 事件发生时鼠标在浏览器内容区域的X/Y坐标（不包含滚动条）。 浏览器内容区域即浏览器窗口中用来显示网页的可视区域，注意这个可视，也
pageX和clientX
rihongliu的专栏
09-29 2185
摘自http://www.cnblogs.com/jicheng/p/5945057.html。 很好的说明pageX和clientX的问题。。。
浅谈pageX/Y和clientX/Y. screenY/X以及兼容性写法
yk18773435037的博客
05-27 539
  pageY/X:鼠标位于整个网页页面的顶部和左侧部分的距离。（页面）  clientX/Y:鼠标位于屏幕的顶部和左侧部分的距离。（页面）  screenY/X:鼠标位于屏幕的上方和左侧的距离。（屏幕）pageY/X并未得到IE浏览器的支持所以就需要写兼容性写法。思路：鼠标在网页中的位置=被卷去的部分scroll().top/left+可视区域的部分clientX/Y。...
让一个定位的盒子水平垂直居中
Jack_13201的博客
08-28 1042
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-...
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的区别
为了准确获取鼠标相对于不同坐标系的位置，HTML提供了多种属性，如offsetX,clientX,screenX,pageX,y,offsetY,clientY,screenY,pageY等。本文将详细分析这些属性之间的区别及其在开发中的应用场景。 ### offsetX和...
offsetX、clientX、pageX、screenX
qq_36303110的博客
05-19 229
offsetX、clientX、pageX、screenX offsetX / offsetY 事件发生时鼠标相对于事件源元素的坐标，事件源元素就是绑定事件的那个元素 pageX / pageY 鼠标相对于网页的位置，它的位置是跟滚动条相关的 clientX / clientY 鼠标相对于当前可见区域的位置(无论滚动条如何滚动，只要鼠标的位置仍然相对于浏览器在这个位置，这个点的位置就是不会变的) screenX / screenY 鼠标相对于电脑屏幕的位置，只有当浏览器窗口变化，鼠标仍相对于
pageX、clientX等的区别
热门推荐
我的blog屋
05-26 1万+
鼠标事件 鼠标事件有下面这几种： 1. onclick 鼠标点击事件 box.onclick = function(e){ console.log(e) } 2. onmousedown 鼠标按下事件 box.onmousedown = function(e){ cons...
pageX，clientX，screenX的区别
m0_38005587的博客
11-27 1905
clientX是指鼠标到当前页面X轴的距离，如果有滚动，这个参考点也会改变，还不能理解就想一下fixed定位就可以了； pageX是指鼠标到当前bodyX轴的距离，如果有滚动，参考点也不会变，如果position为absolute为例； screenX是鼠标到当前屏幕X轴的距离，不会改变，但不同的会有所不同；...
pageX-layerX-clientX-offsetX的区别
qyaroon的博客
04-13 993
PageX和clientX 这个两个比较容易搞混, PageX:鼠标在页面上的位置,从页面左上角开始,即是以页面为参考点,不随滑动条移动而变化 clientX:鼠标在页面上可视区域的位置,从浏览器可视区域左上角开始,即是以浏览器的可视窗口为参考点,随滑动条移动 而变化. IE中没有PageX，解决办法： PageY=clientY+scrollTop-clientTop; 页面上的位置
cript获取鼠标坐标pageX和clientX的区别
qq_23614619的博客
07-21 1136
cript获取鼠标坐标pageX和clientX的区别 这两种获取鼠标坐标的方法，区别在于基于的对象不同： pageX和pageY获取的是鼠标指针距离文档（HTML）的左上角距离，不会随着滚动条滚动而改变； clientX和clientY获取的是鼠标指针距离可视窗口(不包括上面的地址栏和滑动条)的距离，会随着滚动条滚动而改变； 测试代码： &lt;!DOCTYPE html&gt; ...
clientX,pageX,x,screenX,offsetX等的区别
ssisse的博客
06-01 2676
先总结下区别： event.clientX、event.clientY 鼠标相对于浏览器窗口可视区域的X，Y坐标（窗口坐标），可视区域不包括工具栏和滚动条。IE事件和标准事件都定义了这2个属性 event.pageX、event.pageY 类似于event.clientX、event.clientY，但它们使用的是文档坐标而非窗口坐标。这2个属性不是标准属性，但得到了广泛
JS中 PageX、clientX、offsetX、layerX、offsetTop、offsetWidth各位置属性详解
qq_43631129的博客
07-05 8377
PageX、clientX、offsetX、layerX、offsetTop、offsetWidth各位置属性详解
clientX、offsetX、screenX、pageX的区别
Serena_tz的博客
02-22 5678
一、概念总结 1、event.clientX、event.clientY 鼠标相对于浏览器窗口可视区域的X，Y坐标（窗口坐标），可视区域不包括工具栏和滚动条。IE事件和标准事件都定义了这2个属性.clientX指可视区域内离左侧的距离，以滚动条滚动到的位置为参考点。各个浏览器相同。即当有滚动条时clientX 小于 pageX。 2、event.pageX、event.pageY 类似于event.clientX、event.clientY，但它们使用的是文档坐标而非窗口坐标。这2个属性不是标准属性，但得到
pageX,clientX,offsetX,layerX的那些事
wanganqi19920813的专栏
11-23 543
在各个浏览器的JS中,有很多个让你十分囧的属性,由于各大厂商对标准的解释和执行不一样,导致十分混乱,也让我们这些前端攻城狮十分无语和纠结>_ John Resig大神说过,动态元素有3个至关重要的元素,位置,尺寸和可见性.所以,今天,先拿几个页面位置属性开刀. 一.PageX和clientX PageX和clientX ,这个两个比较容易搞混, PageX:鼠标在页面上的位置,从页
比较offsetX, pageX,clientX,screenX的区别
hhh_hh_h的博客
04-07 787
之前一直没有把offset，page，client和screen这几个属性弄得很清楚，今天花了点时间算是大体上了解了这几个属性的区别，所以把我了解到的写出来，也算是做个总结。 首先我们来看看这几个属性的解释： 1.offsetX：鼠标相对于事件源元素的X坐标，只有IE事件有这2个属性，标准事件没有对应的属性 2.pageX： 鼠标指针的位置，相对于文档的左边缘 3.clientX：返回当事
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

今天又懒得加班

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值