JavaScript中pageX pageY offsetX offsetY区别

最新推荐文章于 2025-07-07 10:19:46 发布
最新推荐文章于 2025-07-07 10:19:46 发布
阅读量5.9k 收藏 9
点赞数 4
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/onion_line/article/details/79559331
本文介绍了在Internet Explorer浏览器中鼠标指针位置的相关属性。详细解释了pageX与pageY属性的作用，即表示鼠标在文档中的坐标；同时阐述了offsetX与offsetY属性的功能，即表示鼠标相对于触发事件元素的位置。

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

IE下没有pageX,pageY这两个属性  

pageX pageY:鼠标指针的位置，文档的坐标。

offsetX offsetY:鼠标相对于事件源元素的x,y坐标




winson.L
关注
clientX、offsetX、screenX、pageX、x的区别
我的blog屋
05-30 1073
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
MoseEvent 中的几种坐标系
知秋
08-15 879
在处理鼠标事件（MouseEvent）时，了解不同的坐标系是非常重要的。常见的坐标系包括屏幕坐标（screen）、客户端坐标（client）、页面坐标（page）、图层坐标（layer），以及偏移坐标（offset）。这些坐标系各自有不同的用途，理解它们的区别有助于我们更精确地处理用户交互事件。本文将深入探讨这些坐标系的含义及其应用场景。
pageX和pageY
weixin_30869099的博客
08-22 217
pageX() 属性是鼠标指针的位置，相对于文档的左边缘。 pageY() 属性是鼠标指针的位置，相对于文档的上边缘。 例1 $(document).mousemove(function(e){ $("span").text("X: " + e.pageX + ", Y: " + e.pageY); }); 例2 $('#demo').off('click').on('click',f...
前端 —— JavaScript 基础篇 18 -- window.pageYOffset
宁静致远
06-21 5458
最近想仿照淘宝首页的侧边栏，写个简单的小例子。获取滚动条距离顶部的距离用到了window.pageYOffset 方法。 window.pageYOffset 返回文档当前沿垂直轴（即向上或向下）滚动的像素数，其值为0.0，表示该Document的顶部边缘当前与窗口内容区域的顶部边缘对齐。pageYOffset是scrollY的一个别名是 window的只读属性 在IE9及以上、谷歌 、Safari、firefox，Opera(presto内核) 都支持 此语句 window.pageYO...
一文搞懂 JavaScript 中的 `pageXOffset`、`scrollX`、`pageYOffset` 和 `scrollY`
最新发布
JakeMa1024的博客
07-07 618
在前端开发中，页面滚动是一个非常常见的交互场景。无论是实现“回到顶部”按钮、固定导航栏，还是动态加载内容，开发者都需要精确控制或获取页面的滚动位置。而 JavaScript 中的 `pageXOffset`、`scrollX`、`pageYOffset` 和 `scrollY` 四个属性，正是实现这些功能的关键工具。 本文将深入浅出地讲解这四个属性的用法、区别以及实际应用场景，帮助你快速掌握它们的精髓。
JS中 PageX、clientX、offsetX、layerX、offsetTop、offsetWidth各位置属性详解
qq_43631129的博客
07-05 8377
PageX、clientX、offsetX、layerX、offsetTop、offsetWidth各位置属性详解
js滑动操作之-pageYOffset,scrollTop,offsetHeight,scrollHeight
子燕若水的博客
12-03 1382
读取 1) window.pageYOffset==window.scrollY it returns the number of pixels the document is currently scrolled along the vertical axis 2) letscrollElm=let a reference to theElementthat scrolls the document. In standards mode, this is the root elem...
js dom操作 pageX,pageY,offsetX,offsetY,clientX/Y,screenX/Y 介绍使用
weixin_34402408的博客
09-17 1647
什么是DOM? DOM，文档对象模型（Document Object Model）。DOM是 W3C（万维网联盟）的标准，DOM定义了访问HTML和XML文档的标准。在W3C的标准中，DOM是独于平台和语言的接口，它允许程序和脚本动态地访问和更新文档的内容、结构和样式。 W3C DOM由以下三部分组成： - 核心DOM - 针对任何结构化...
[转]分析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和...
JavaScript中获取鼠标位置相关属性总结
10-25
在现代浏览器中，推荐使用clientX和clientY来获取鼠标在视窗内的位置，使用pageX和pageY来获取鼠标在整个文档中的位置，而对于IE9及更新的浏览器，layerX和layerY是替代offsetX和offsetY的不错选择。在设计跨浏览器...
js计算滚轮滚动到导航组件时吸顶
qq_41411324的博客
02-03 410
页面： 吸顶方法：
html offset属性,Window pageXOffset 和 pageYOffset 属性 - JavaScript - 菜鸟学堂-脚本之家...
weixin_31865445的博客
06-05 609
WindowpageXOffset和pageYOffset属性Window 对象定义和用法pageXOffset 和 pageYOffset 属性返回文档在窗口左上角水平和垂直方向滚动的像素。pageXOffset 设置或返回当前页面相对于窗口显示区左上角的 X 位置。pageYOffset 设置或返回当前页面相对于窗口显示区左上角的 Y 位置。pageXOffset 和 pageYOf...
鼠标位置的获取pageX，pageY，screenX，screenY，clientX，和clientY，offsetX ，offsetY，layerX，layerY的使用 和 区别
热门推荐
manba
03-31 1万+
pageX，pageY，screenX，screenY，clientX，和clientY返回一个数，其指示物理“CSS像素”的数量的点是从参考点。事件点是用户单击的位置，参考点是左上角的一个点。这些属性返回该参考点的水平和垂直距离。 1、pageX和pageY： 相对于浏览器中完全呈现内容区域的左上角。此参考点位于左上角的URL栏和后退按钮下方。这一点可以在浏览器窗口中的任何位置， 并且如果在...
JS: offsetLeft/Top、offsetParent、scrollLeft/Top、clientLeft/Top、scrollX、scrollY、pageXOffset、pageYOffse
devJan的博客
04-25 783
定位的父级元素 offsetParent:离当前元素最近的非position:static的元素
浏览器的各种长度宽度clientX clientY pageX pageY x y
yaoqian的博客
09-18 1079
1，首先测试pageX ,pageY和clientX clientY        鼠标固定某一位置，通过上下键来移动滚动条，发现clientX clientY始终不变，pageX ,pageY随时变化        pageX，pageY: 以页面为左上角（绝对位置）为参考点，鼠标所在位置坐标是随时变化的        clientX， clientY ：以当前看到页面的左上角（相对位置）
pageX/pageY、clientX/clientY、screenX/screenY的区别
cai_niao5623的博客
10-15 2512
在触发鼠标事件的时候会传一个event参数，在这个参数中我们可以获得pageX/pageY、clientX/clientY、screenX/screenY，但是这几个属性有啥区别呢？看下图 screenX/screenY：其实就是你的鼠标指针距离你电脑屏幕左侧边缘和上侧边缘的距离 clientX/clientY：其实就是你的鼠标指针距离当前网页最左侧和最上侧的距离(不包含滚动条的距离) pageX/pageY：其实就是你的鼠标指针距离当前网页最最侧和最上侧的距离(包含滚动条的距离) ...
如何更好的理解（pageX,pageY,clientX,clientY,eventX,eventY,scrollX,scrollY,screenX,screenY,event.offsetX,even...
am50506的博客
04-10 332
1 pageX,pageY:鼠标指针相对于当前窗口的X,Y坐标，计算区域包括窗口自身的控件和滚动条。（火狐特有） 2 event.clientX,event.clientY:鼠标指针相对于当前窗口的X,Y坐标,和page 不同的是计算区域不包括窗口自身的控件和滚动条。 3 event.X和event.Y:相对于当前窗口，设置或获取鼠标指针位置相对于父文档的x,y像素坐标(可惜火狐不支...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值