鼠标事件之clientX(Y)、offsetX(Y)、screenX(Y)、pageX(Y)、x(y)的区别与使用详解

最新推荐文章于 2023-02-27 22:43:58 发布
最新推荐文章于 2023-02-27 22:43:58 发布
阅读量545 收藏 3
点赞数
分类专栏： DOM JavaScript 文章标签： javascript dom
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Janewenhui/article/details/111350210
版权
本文详细解析了JavaScript中DOM鼠标事件的常用坐标属性，包括clientX/Y（相对浏览器窗口），pageX/Y（相对整个页面，含滚动条），screenX/Y（相对屏幕），offsetX/Y（相对事件源元素）以及x/y（同screenX/Y）。介绍了这些坐标在鼠标点击、按下、松开、移动、经过和划出等事件中的应用。
摘要由CSDN通过智能技术生成
最低0.47元/天 解锁文章
Janewenhui
关注
  • 0
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
[转]分析x,offsetX clientX screenX,pageX,y,offsetY clientY screenY,pageY之间的区别
03-17
NULL 博文链接：https://meizhi.iteye.com/blog/576133
鼠标事件clientX、clientY
04-21
clientX、clientY、pageX、pageY、screenX、screenY、offsetX、offsetY
鼠标事件中的x,y含义/clientX,clientY,pageX,pageY,offsetX,offsetY,screenX,screenY,movementX,moventmentY,x,y区别
LEVsunshine的博客
11-03 2321
打印一下event事件，发现里面有各种各样的偏移量 区别： clientX/clientY 距离浏览器可视区域的x，y坐标（不包括滚动条和头部导航栏——相对于body） pageX/pageY 对于整个页面来说，包括了被卷去的body部分的长度 当页面没有滚动条时，client和page一样 movementX/movementY 两个鼠标移动事件间隔时间中当中鼠标移动的相对坐标 offsetX/offsetY 相对于当前监听元素的x，y坐标；（不包括border） layerX/laye
获取鼠标事件的鼠标x|y坐标
Focus-Fe
03-05 962
获取鼠标事件的鼠标x|y坐标   关于Event相关的可以参考http://zhangyaochun.iteye.com/blog/1439502 兼容性参考http://zhangyaochun.iteye.com/blog/1439543   /* *pointer ---the mouse position x/y* *@function* *@param {Even...
鼠标事件以及clientX、offsetX、screenX、pageX、x的区别
weixin_55560445的博客
02-21 227
鼠标事件 鼠标事件有下面这几种： 1. onclick 鼠标点击事件 box.onclick = function(e){ console.log(e) } 2. onmousedown 鼠标按下事件 box.onmousedown = function(e){ console.l...
图解鼠标事件的 ScreenX ，LayerX，clientX，PageX，offsetX，X
fang_my的博客
02-27 1635
这篇文章是由我随手做的笔记改编而来，笔记内容比较粗糙，转化为文章后个人感觉又重新复习了一遍，加深了很大的印象。如果该文章能帮助到一些人，也是一件幸事。可能我以后也会经常来翻阅自己的这篇文章～这几个属性确实容易搞混🤔。
javascript 的 clientX用法
weixin_30311605的博客
01-20 287
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>测试</title></head><body > <div id="div1" style="width: 100px; height: 100...
clientX,pageX,offsetX,x,layerX,screenX,offsetLeft区别分析
09-05
`clientX`, `pageX`, `offsetX`, `x`, `layerX`, `screenX`, 和 `offsetLeft` 是JavaScript中用于描述鼠标位置和元素相对位置的一系列属性。下面我们将详细分析这些属性的区别和应用场景。 1. **screenX**: 这个...
【JavaScript源代码】JavaScript 鼠标事件(MouseEvent)案例讲解.docx
12-29
JavaScript 鼠标事件，即 MouseEvent，是JavaScript中处理与鼠标操作相关事件的关键部分。当用户使用鼠标执行特定操作，如点击、移动、滚动等，浏览器会生成一个MouseEvent对象，这个对象包含了关于鼠标事件的详细...
JS中的offsetWidth、offsetHeight、clientWidth、clientHeight等等的详细介绍
weixin_33782386的博客
06-03 417
javascript中offsetWidth、clientWidth、width、scrollWidth、clientX、screenX、offsetX、pageX 原文：https://www.cnblogs.com/ifworld/p/7605954.html offsetWidth //返回元素的宽度（包括元素宽度、内边距和边框，不包括外边距） offsetHeight...
获取鼠标位置
09-06 314
clientX 设置或获取鼠标指针位置相对于窗口客户区域的 x 坐标，其中客户区域不包括窗口自身的控件和滚动条。clientY 设置或获取鼠标指针位置相对于窗口客户区域的 y 坐标，其中客户区域不包括窗口自身的控件和滚动条。offsetX 设置或获取鼠标指针位置相对于触发事件的对象的 x 坐标。offsetY 设置或获取鼠标指针位置相对于触发事件的对象的 y 坐标。screenX 设置或获取获取鼠
JavaScript 中一些概念理解 ：clientX、clientY、offsetX、offsetY、screenX、screenY
甜心的专栏
11-11 7046
clientX：设置或获取鼠标指针位置相对于窗口客户区域的 x 坐标，其中客户区域不包括窗口自身的控件和滚动条。 clientY： 设置或获取鼠标指针位置相对于窗口客户区域的 y 坐标，其中客户区域不包括窗口自身的控件和滚动条。 offsetX： 设置或获取鼠标指针位置相对于触发事件的（this）对象的 x 坐标。 offsetY ：设置或获取鼠标指针位置相对于触发事件的（this）对象的 y 坐标。 screenX： 设置或获取获取鼠标指针位置相对于用户屏幕的 x 坐标。 screenY： 设.
clientX、offsetX、screenX、pageX的区别
Serena_tz的博客
02-22 3298
一、概念总结 1、event.clientX、event.clientY 鼠标相对于浏览器窗口可视区域的X，Y坐标（窗口坐标），可视区域不包括工具栏和滚动条。IE事件和标准事件都定义了这2个属性.clientX指可视区域内离左侧的距离，以滚动条滚动到的位置为参考点。各个浏览器相同。即当有滚动条时clientX 小于 pageX。 2、event.pageX、event.pageY 类似于event.clientX、event.clientY，但它们使用的是文档坐标而非窗口坐标。这2个属性不是标准属性，但得到
js计算滚轮滚动到导航组件时吸顶
qq_41411324的博客
02-03 322
页面： 吸顶方法：
css里dom宽度,2019-08-23 DOM中各种高度、宽度
weixin_42520025的博客
08-04 1149
1.引言对常见CSS x,y属性有大概了解，实际运用过程中发现很多概念模糊不清，对其进行学习。2.常见x,y属性概念1. e.clientX 是目标点距离浏览器可视范围的X轴坐标2. e.pageX 是目标点距离document最左上角的X轴坐标，即触发事件点相对于当前浏览器可视窗口左上角的横向距离，加上滚动条的滚动距离[没有滚动条时pageX=clientX,有滚动条时pageX=clientX...
clientX、pageX、screenX以及offsetX区别
weixin_42178670的博客
10-29 1541
clientX：鼠标相对于浏览器窗口可视区域x方向坐标clientY：鼠标相对于浏览器窗口可视区域y方向坐标。
浅谈clientX、offsetX、screenX、pageX
漫磋嗟
10-24 2661
clientX、offsetX相对于鼠标事件对象，需要触发鼠标事件才会有clientX、offsetX。 clientX：当事件被触发时鼠标指针相对于窗口左边界的水平坐标,参照点为浏览器内容区域的左上角，该参照点会随之滚动条的移动而移动。 offsetX：当事件被触发时鼠标指针相对于所触发的标签元素的左内边框的水平坐标。 screenX：鼠标位置相对于用户屏幕水平偏移量，此时的参照点也就是原点是屏幕的左上角。 pageX：参照点是页面本身的body原点，而不是浏览器内容区域左上角，它计算的值不会随着滚动条而
pageX、clientX等的区别
热门推荐
我的blog屋
05-26 1万+
鼠标事件 鼠标事件有下面这几种： 1. onclick 鼠标点击事件 box.onclick = function(e){ console.log(e) } 2. onmousedown 鼠标按下事件 box.onmousedown = function(e){ cons...
如何保存x和y坐标在div背景图的百分比
最新发布
05-28
如果你想要保存鼠标在div背景图中的位置百分比，你可以通过计算鼠标在div中的坐标，然后将其转换为相对于背景图的百分比位置来实现。 首先，你需要通过鼠标事件获取鼠标在div中的坐标，可以使用以下代码： ``` var mouseX = event.clientX - div.offsetLeft; var mouseY = event.clientY - div.offsetTop; ``` 其中，event.clientX和event.clientY表示鼠标相对于窗口的位置，div.offsetLeft和div.offsetTop表示div相对于窗口的位置。 然后，你可以通过计算鼠标在div中的坐标占div宽高的比例，得到其在div背景图中的百分比位置，例如： ``` var bgX = (mouseX / div.offsetWidth) * 100; var bgY = (mouseY / div.offsetHeight) * 100; ``` 最后，你可以将bgX和bgY的值保存下来，或者将其应用到div的背景图片上，例如： ``` div.style.backgroundPosition = bgX + '% ' + bgY + '%'; ``` 这将把背景图片的位置设置为鼠标在div中的位置百分比。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值