一文看懂js中的clientX，clientY，pageX，pageY，screenX，screenY

最新推荐文章于 2025-03-19 14:23:25 发布
转载 最新推荐文章于 2025-03-19 14:23:25 发布 · 637 阅读 · 0 ·
CC 4.0 BY-SA版权
原文链接：https://www.cnblogs.com/jsydb/p/12344622.html

博客提供了原文链接https://www.cnblogs.com/jsydb/p/12344622.html ，但未包含其他关键信息技术信息。
图解offsetX、offsetY和clientX、clientY和pageX、pageY和screenX、screenY的区别
逆风优雅的博客
06-10 6279
offsetX、offsetY: 鼠标相对于事件源元素的X,Y坐标。比如说，我给黄色的盒子定义一个点击事件，则这个offset的坐标原点就在这个黄色盒子的左上角 clientX、clientY: 鼠标相对于浏览器窗口可视区域的X，Y坐标（窗口坐标），可视区域不包括工具栏和滚动条。 pageX、pagey: 事件发生时鼠标相对于整个页面的坐标。整个页面是说整个网页的区域。 pageX=clientX+横向滚动区域(如果有滚动条) pagey=clienty+纵向滚动区域(如果有滚动条) s...
浅谈clientX、offsetX、screenX、pageX
漫磋嗟
10-24 2969
clientX、offsetX相对于鼠标事件对象，需要触发鼠标事件才会有clientX、offsetX。 clientX：当事件被触发时鼠标指针相对于窗口左边界的水平坐标,参照点为浏览器内容区域的左上角，该参照点会随之滚动条的移动而移动。 offsetX：当事件被触发时鼠标指针相对于所触发的标签元素的左内边框的水平坐标。 screenX：鼠标位置相对于用户屏幕水平偏移量，此时的参照点也就是原点是屏幕的左上角。 pageX：参照点是页面本身的body原点，而不是浏览器内容区域左上角，它计算的值不会随着滚动条而
JavaScript中的事件对象、事件对象的属性clientX、clientY、pageX、pageY等等
weixin_46449470的博客
04-26 1371
一、什么是事件对象 ​ 1）、 事件对象 就是保存着事件相关信息的对象。当事件发生时，会自动产生事件对象（不需要new），事件对象中包含着：事件源（发生事件的dom元素），点击是鼠标的哪个键，鼠标的当前位置（事件发生的位置）等等信息。 2）、事件源： ​ 发生事件的DOM元素（按钮，文本框，div，下拉框）。在事件处理函数里可以用this表示。 3）、事件对象的获取 ​ ...
clientX,pageX,screenX，offsetLeft，scrollTop
wjping11360的专栏
05-19 598
这个东西，以为理解了，今天彻底弄弄。 clientX 观点：鼠标相对于WINDOWS的坐标。 这里这个WINDOWS是指我们能看见的浏览器大小。所以不可能超过显示器的大小，如screen.width,screen.height 证明：点击获得clientX,clientY的大小，设置为图片定位的位置。 如果上面观点不成立，也就是这个坐标不是浏览器范围内的，例如是相对DOCUMENT的，那
JS中的offsetWidth、offsetHeight、clientWidth、clientHeight等等的详细介绍
weixin_33782386的博客
06-03 501
javascript中offsetWidth、clientWidth、width、scrollWidth、clientX、screenX、offsetX、pageX 原文：https://www.cnblogs.com/ifworld/p/7605954.html offsetWidth //返回元素的宽度（包括元素宽度、内边距和边框，不包括外边距） offsetHeight...
JS中 PageX、clientX、offsetX、layerX、offsetTop、offsetWidth各位置属性详解
qq_43631129的博客
07-05 8488
PageX、clientX、offsetX、layerX、offsetTop、offsetWidth各位置属性详解
js clientX pageX offsetX screenX
哈哈绝的博客
10-28 1293
js clientX pageX offsetX screenX pageX pageY:鼠标指针的位置，相对于文档开头左上角的位置 offsetX offsetY:鼠标相对于事件源元素左上角的x,y坐标 clientX clientY：鼠标指针相对与窗口左上角的位置 screenX screenY 鼠标指针相对于显示器左上角的位置 ...
[转]分析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 event对象offsetX, clientX, pageX, screenX, layerX, x区别
热门推荐
lzding的博客
05-02 5万+
通过 2 张图和 1 张表格，轻松区别 Javascript Event 对象中的offsetX, clientX, pageX, screenX, layerX, x等属性。 不同浏览器对这些属性的支持：
鼠标事件的screenY,pageY,clientY,layerY,offsetY属性详解
09-03
主要介绍了鼠标事件的screenY,pageY,clientY,layerY,offsetY属性详解,需要的朋友可以参考下
纯js做鼠标拖拽物体并记录鼠标位置的效果（附pageX clientX offsetX screenX的区别图）...
weixin_30381317的博客
01-08 146
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title></title> 6 <style> 7 8 *{ 9 ...
浏览器的各种长度宽度clientX clientY pageX pageY x y
yaoqian的博客
09-18 1101
1，首先测试pageX ,pageY和clientX clientY        鼠标固定某一位置，通过上下键来移动滚动条，发现clientX clientY始终不变，pageX ,pageY随时变化        pageX，pageY: 以页面为左上角（绝对位置）为参考点，鼠标所在位置坐标是随时变化的        clientX， clientY ：以当前看到页面的左上角（相对位置）
Javascript中event对象的clientX，LayerX，offsetX, pageX
漫游学海之旅
02-11 2853
废话不多说，下面分别检测各个浏览器下的e.pageX e.layerX e.offsetX e.clientX e.screenX e.x 属性；测试浏览器：FF9/Chrome15/opera11.52/safari5(win)/IE6/7/8/9测试代码：View Code 图示：测试结果如下：chrome：e.pageX——相对整个页面的坐标 e.layerX——相对当前选
event对象的属性：clientX、clientY、pageX、pageY、offsetX、offsetY
weixin_44077629的博客
02-22 410
clientX：距离可视窗口左面的距离 clientY：距离可视窗口顶端的距离 pageX：距离整个页面（超出可视窗口的页面）左面的距离 pageY：距离整个页面（超出可视窗口的页面）顶端的距离 offsetX：距离容器左面的距离 offsetY：距离容器顶部的距离 ...
js计算滚轮滚动到导航组件时吸顶
qq_41411324的博客
02-03 436
页面： 吸顶方法：
JavaScript 中的 clientX：精准定位用户交互的核心坐标
最新发布
03-19 595
在网页开发中，精准捕捉用户的交互行为（如点击、拖拽、触摸）是实现动态效果的关键。JavaScript 的 `clientX` 属性正是这一场景下的核心工具，它提供了事件发生时鼠标或触摸点在视口中的精确水平坐标。本文将深入解析 `clientX` 的原理、用法及实战技巧。
javascript 的 clientX用法
weixin_30311605的博客
01-20 366
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>测试</title></head><body > <div id="div1" style="width: 100px; height: 100...
JavaScript--clientX,clientY、pageX,pageY、offsetLeft,offsetTop/offsetWidth,offsetHeight、scrollLeft,scr...
weixin_30275415的博客
10-27 238
1 /*在事件的内部console.dir(event)*/ 2 /** 3 * 事件对象event 4 * clientX/clientY 获取鼠标基于浏览器窗口（可视区域的坐标位置）全兼容 5 * 6 * pageX/pageY 获取鼠标基于网页文本的坐标位...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值