鼠标事件offsetX会传递给子元素

最新推荐文章于 2024-06-01 13:39:13 发布
原创 最新推荐文章于 2024-06-01 13:39:13 发布 · 565 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

本文探讨了使用div.offsetWidth、div.offsetLeft及e.pageX等属性来创建XY轴坐标系的方法，以解决鼠标事件offsetX无法直接应用于子元素的问题。

鼠标事件offsetX会传递给子元素

在这里插入图片描述

本来是想要通过e.offset来创建XY轴二维坐标系的，当事实上很难办到，所以我改用了通过div.offsetWidth（元素宽度包括border）、div.offsetLeft（元素距整个网页左边缘的长度）、e.pageX（鼠标事件中获取鼠标距离整个网页左边缘的长度）来实现。

高桥靓仔
关注
中国json地图的点击事件
**My Coding Family**
02-05 913
🏆本文收录于专栏，主要记录项目实战过程中所遇到的Bug或因后果及提供真实有效的解决方案，希望能够助你一臂之力，帮你早日登顶实现财富自由🚀；同时，欢迎大家！持续更新中，up！up！up！！
使用onmousemove事件实现移动（拖拽）div 出现的关于offsetX的问题
赫兹焦耳的博客
05-11 7578
出现的问题如下图所示（截屏看不出来看log）再移动鼠标的过程中会不断的出现异常值导致拖动的div不断切换位置，回到左上角。我以为是冒泡机制导致的所以添加了下面一段阻止冒泡，随便也阻止了默认事件，但是并没有效果==================================================================ev.preventDefault();if (ev.sto...
event.offsetX ,事件
qq_45505241的博客
11-07 2535
js兼容问题，鼠标相对于事件源的位置，offsetX，layerX
u013342600的专栏
02-28 2271
前几天在工作中遇见一个问题。就是要判断鼠标点击后 相对于事件源（event.target）的位置。 当然可以用event.offsetX,event.offsetY,来获取到。 但是到了FF里面就挂了。 event.layerX 也不获取不到。 干脆就自己写了个方法， function getOffsetXY(evt) { if (evt.offsetX && evt.o
js事件坐标大乱斗：screenX、clientX、pageX、offsetX
weixin_40581714的博客
07-06 1293
screenX: 鼠标相对于电脑屏幕的X坐标 screenY: 鼠标相对于电脑屏幕的Y坐标 clientX/clientY: 鼠标的坐标到可视区域的坐标，比如在谷歌浏览器中，指工具栏之下的区域。注意跟页面滚动无关，因为浏览器本身不滚动 pageX/pageY: 鼠标相对于整个网页主题左上角的坐标。会受到滚动影响。当无滚动时，跟client是一样的值 offsetX/offsetY： 事件发生时鼠标相对于事件源元素的坐标，获取数据类似pageX/Y，但是受到子元素影响。意思就是pageX/Y总是相对于网
js e.offsetX 和 e.offsetY
JDDDDDDyaya的博客
11-07 2416
本人自己在写代码的过程中，一直对e.offsetX 与 e.offsetY 分不清，今天好好探究一下e.offsetX 与 e.offsetY e.offsetX 与 e.offsetY 下相对与事件源的距离，也就是e.target， 大家看下面例子,给出几张截图。 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name
前端功能拖拽篇：dragleave拖拽事件穿透子元素的优雅解决方案
潜心
06-01 2219
📚vue专栏☃️ 个人简介：一个喜爱技术的人。🌞 励志格言: 脚踏实地，虚心学习。
如何在大小为0的节点上监听鼠标点击事件
最新发布
11-05
**原理**：将事件监听器绑定到尺寸为0节点的**父元素**上，通过事件冒泡捕获子元素事件[^3] ```html <!-- 父元素有尺寸，子元素尺寸为0 --> ; height:200px; background:#eee;"> ; height:0;"> // 监听父元素...
【事件处理与交互】键盘和鼠标事件的处理机制
键盘和鼠标事件是最常见的两类事件，它们允许程序捕捉和响应用户的输入操作。理解这些基本的事件类型是开发交互式应用的基础。 ## 1.2 事件处理的重要性 有效的事件处理能够提升用户体验，使程序对用户操作做出即时...
掌控鼠标事件全流程：MouseDown到MouseUp的完美协同
本文系统探讨了鼠标事件的核心机制及其在现代Web交互系统中的关键作用，重点分析了MouseDown与MouseUp事件的触发原理、生命周期及配对匹配机制。文章深入研究了不同输入设备对事件处理的影响，提出了基于状态机的三...
事件坐标：screenX,clientX,pageX,offsetX的区别
qq_43654065的博客
01-04 865
e.screenX/e.screenY: 事件发生时鼠标相对于电脑屏幕的坐标。e.screenX,e.screenY的最大值不会超过屏幕分辨率。 e.clientX/e.clientY: 事件发生时鼠标在浏览器内容区域的坐标。 浏览器内容区域就是浏览器窗口中用来显示网页的可视区域，不包括滚动条和工具栏，也不随滚动条的移动而移动。 当浏览器窗口缩小时，e.clientX/e.clientY的最大值也会缩小。 e.pageX/e.pageY: 事件发生时鼠标相对于整个页面的坐标。整个页面是说整个网页的区域。
原生js 解决offsetX兼容性问题
高先生的猫
05-28 652
// 针对火狐不支持offsetX/Y function getOffset(e) { var target = e.target, // 当前触发的目标对象 eventCoord, pageCoord, offsetCoord; // 计算当前触发元素到文档的距离 pageCoord = getPageCoord(target); // 计算光标到文档的距离 eventCoord = { X: window.pageXOffset + e.clie.
js做放大镜时offsetX,offsetY抖动解决办法
desongzhang的博客
02-03 1856
在模仿淘宝放大镜效果时, 发现mask层一直抖动, 红色方框添加了onmousemove事件, 内部用到了offsetX 最后解决方案是给mask添加css属性: pointer-events: none; 原本我是想让outer作为参考系获得offsetX和offsetY的值, 所以把onmousemove事件响应函数添加到outer上, 可是这样做仅仅代表,事件冒泡到outer层才会执行回调函数, offsetX参考系并不是outer, 其实event.offsetX是以event.tar
js|嵌套盒模型的鼠标offsetX/Y的问题解决(含源码解析)
执念斩长河
05-24 1170
因为盒子套盒子，产生offsetX/Y的问题,为了解决这样的问题利用“定位参考祖先元素”不断进行迭代，中间有对深层次原理的思考，也有算法迭代的探索，解决此类问题还需静下心来懂点原理。
彻底搞懂 offsetX、scrollX、clientX 的区别
热门推荐
lefex的博客
03-05 2万+
无论在 iOS 还是前端开发中，关于如何定位一个元素是必须要掌握的知识，而在前端中，元素定位比较难理解，我们今天一起学习下。在 DOM 设计中，主要通过这些 API 来确定某个元素的具体...
js dom操作 pageX,pageY,offsetX,offsetY,clientX/Y,screenX/Y 介绍使用
weixin_34402408的博客
09-17 1663
什么是DOM? DOM，文档对象模型（Document Object Model）。DOM是 W3C（万维网联盟）的标准，DOM定义了访问HTML和XML文档的标准。在W3C的标准中，DOM是独于平台和语言的接口，它允许程序和脚本动态地访问和更新文档的内容、结构和样式。 W3C DOM由以下三部分组成： - 核心DOM - 针对任何结构化...
js事件对象Event获取pageX,clientX,screenX,offsetX,layerX的方式与区别
javaloveiphone的专栏
03-22 9740
pageX:鼠标在页面上的位置,从页面左上角开始,即是以页面为参考点,同一个元素坐标不随滑动条移动而变化clientX:鼠标在页面上可视区域的位置,即是以浏览器滑动条此刻的滑动到的位置为参考点,同一个元素坐标随滑动条移动而变化.注： 1、如果元素位于body中，e.clientX + document.body.scrollLeft - document.body.clientLeft = e.p
event对象的offsetX, clientX, pageX, screenX
hardly555的博客
11-01 1131
现在需要对event对象的几大与坐标有关的属性做一个总结，以便于认识 offsetX|offsetY offsetX/Y获取到是触发点相对被触发dom的左上角距离(包括padding在内，不包括border)，不过左上角基准点在不同浏览器中有区别，以内容区左上角为基准点（不包括边框），如果触发点在边框border上会返回负值。 用途：待发现 clientX|clientY和pageX|pageY clientX|clientY这对坐标相对于窗口，从窗口的顶部/左侧边缘计算得出，类似于cs.
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值