event对象中pageX/Y，clientX/Y，screenX/Y，offsetX/Y区别

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

#html

由鼠标事件（MouseEvent）可以发现： 

1、clientX、clientY
点击位置距离当前body可视区域的x，y坐标

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

3、screenX、screenY
点击位置距离当前电脑屏幕的x，y坐标

4、offsetX、offsetY
相对于带有定位的父盒子的x，y坐标

5、x、y
和screenX、screenY一样


pagyX/Y、clientX/Y、offsetX/Y、screenX/Y；clientHeight、scrollHeight、scrollTop；offsetHeight、offsetTop+滑动条
m0_56029970的博客
09-01 164
JavaScript尺寸和位置的理解，外加简易滑动条实例
[转]分析x,offsetX clientX screenX,pageX,y,offsetY clientY screenY,pageY之间的区别
03-17
在JavaScript中，处理鼠标事件时，经常会遇到一系列与鼠标位置相关的属性，如`x`, `offsetX`, `clientX`, `screenX`, `pageX`, `y`, `offsetY`, `clientY`, `screenY`, `pageY`等。这些属性在不同的上下文下提供了...
clientX,pageX,screenX，offsetLeft，scrollTop
wjping11360的专栏
05-19 566
这个东西，以为理解了，今天彻底弄弄。 clientX 观点：鼠标相对于WINDOWS的坐标。 这里这个WINDOWS是指我们能看见的浏览器大小。所以不可能超过显示器的大小，如screen.width,screen.height 证明：点击获得clientX,clientY的大小，设置为图片定位的位置。 如果上面观点不成立，也就是这个坐标不是浏览器范围内的，例如是相对DOCUMENT的，那
clientX、offsetX、screenX、pageX的区别
Serena_tz的博客
02-22 5666
一、概念总结 1、event.clientX、event.clientY 鼠标相对于浏览器窗口可视区域的X，Y坐标（窗口坐标），可视区域不包括工具栏和滚动条。IE事件和标准事件都定义了这2个属性.clientX指可视区域内离左侧的距离，以滚动条滚动到的位置为参考点。各个浏览器相同。即当有滚动条时clientX 小于 pageX。 2、event.pageX、event.pageY 类似于event.clientX、event.clientY，但它们使用的是文档坐标而非窗口坐标。这2个属性不是标准属性，但得到
理解screenX clientX pageX概念
weixin_30832143的博客
01-04 156
先了解screenX,clientX,pageX概念 screenX: 鼠标位置相对于用户屏幕水平偏移量，而screenY就是垂直方向的，此时的参照点也就是原点是屏幕的左上角。 clientX: 跟screenX相比就是将参照点改成了浏览器内容区域的左上角，该参照点不会随之滚动条的移动而移动。 pageX： 参照点也是浏览器内容区域的左上角，但它会随着滚动条而变动 下面看看具体的各个对象中的...
一张图轻松搞懂javascript event对象的clientX,offsetX,screenX,pageX区别
ruoyiqing的专栏
09-13 1958
总是会被javascript的event对象的clientX,offsetX,screenX,pageX 弄得头晕，于是决定做个图来区分一下
pageX,clientX,screenX,offsetX区别
weixin_43368552的博客
08-22 338
注意，整个页面的意思就是你整个网页的全部，比如说网页很宽很长，宽2000px，高3000px，那pageX,pageY的最大值就是它们了。特别说明：IE下此属性不规范，它们的最小值不是0而是2，也就是说IE下的clientX/clientY比火狐下始终大2px。当你将浏览器窗口缩小时，clientX/clientY的最大值也会缩小，但始终，它们的最大值不会超过你浏览器可视区域。浏览器内容区域即浏览器窗口中用来显示网页的可视区域，注意这个可视，也就是说需要拖动滚动条才能看到的区域不算。特别说明：IE不支持！
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的区别
为了准确获取鼠标相对于不同坐标系的位置，HTML提供了多种属性，如offsetX,clientX,screenX,pageX,y,offsetY,clientY,screenY,pageY等。本文将详细分析这些属性之间的区别及其在开发中的应用场景。 ### offsetX和...
js的clientX、pageX、screenX等方法来获取鼠标坐标详解
最新发布
weixin_41652495的博客
09-26 2203
记录js的clientX、pageX、screenX
图解鼠标事件的 ScreenX ，LayerX，clientX，PageX，offsetX，X
fang_my的博客
02-27 2519
这篇文章是由我随手做的笔记改编而来，笔记内容比较粗糙，转化为文章后个人感觉又重新复习了一遍，加深了很大的印象。如果该文章能帮助到一些人，也是一件幸事。可能我以后也会经常来翻阅自己的这篇文章～这几个属性确实容易搞混🤔。
pageX- clientX- screenX-区别
Harry Blog
04-25 205
screen X screenY 是以我们的电脑屏幕 为基准点测量 pageX pageY 以我们的 文档 （绝对定位） 的基准点 对齐 ie678 不认识 clientX clientY 以 可视区域 为基准点 类似于 固定定位
clientX、pageX、screenX以及offsetX区别
weixin_42178670的博客
10-29 1783
clientX：鼠标相对于浏览器窗口可视区域x方向坐标clientY：鼠标相对于浏览器窗口可视区域y方向坐标。
事件clientX、pageX、screenX、offsetX
m0_56436039的博客
04-29 568
clientX、clientY：点击位置距离当前body可视区域的x，y坐标可以理解为距离浏览器窗口的距离，但注意这里不包括浏览器的导航栏距离只是浏览器内容区域。 pageX、pageY：对于整个页面来说，包括了被卷去的body部分的长度相对于文档边缘,包含滚动条距离 screenX、screenY：点击位置距离当前电脑屏幕的x，y坐标 offsetX、offsetY：相对于带有定位的父盒子的x，y坐标 clientX：在水平方向上，鼠标指针距离浏览器左侧边缘的距离。（不包含滚动条） pageX：
event.clientX、clientY、x、y、offsetX、offsetY、screenX、区别
mememama111的专栏
03-07 245
在Javascript中，坐标的获取让人头晕，下面这段代码较好地演示了上述各个参数的含义： <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"><HTML><HEAD><TITLE> 坐标位置</TITLE><style>*{margin:0}#
screenX clientX pageX的区别
weixin_44011751的博客
07-20 839
screenX:鼠标位置相对于用户屏幕水平偏移量，而screenY也就是垂直方向的，此时的参照点也就是原点是屏幕的左上角。(简单的说就是电脑桌面的左边到当前鼠标点的距离) clientX:跟screenX相比就是将参照点改成了浏览器内容区域的左上角，该参照点会随之滚动条的移动而移动。(就是浏览器可视区域左边和上边到当前点的距离,不包含滚动条遮着的区域) pageX：参照点也是浏览器内容区域的左上角，但它不会随着滚动条而变动 如图(红点就是鼠标当前位置,pageX就是整个文档包括滚动区域左边上边到该点的位置.
javascript中的offsetWidth、clientWidth、innerWidth及相关属性方法
盏茶作酒的博客
09-23 240
****** 元素视图属性 * offsetWidth 水平方向 width + 左右padding + 左右border-width * offsetHeight 垂直方向 height + 上下padding + 上下border-width * * clientWidth 水平方向 width + 左右padding * cli...
screenX、clientX、pageX三者间的区别
qq_41818857的博客
03-31 703
screenX相当于鼠标事件触发时的位置到设备屏幕最左侧的距离。 clientX相当于鼠标事件触发时的位置到浏览器可视窗口的最左侧距离。 pageX相当于鼠标事件触发时的位置到body的最左侧距离,即: pageX = clientX + scrollLeft((滚动条滚动的水平距离)) ...
event中的[clientX,offsetX,screenX,pageX]
weixin_30485799的博客
03-26 157
0.1. clientX clientY event.clientX event.clientY client直译就是客户端，客户端的窗口就是指游览器的显示页面内容的窗口大小（不包含工具栏、导航栏等等）。 event.clientX、event.clientY就是用来获取鼠标距游览器显示窗口的长度。 client范围 兼容性：IE和主流游览器都支持。 0.1.1. offsetX...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值