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

最新推荐文章于 2021-07-06 18:59:13 发布
最新推荐文章于 2021-07-06 18:59:13 发布
阅读量458 收藏
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_45221036/article/details/116375742
版权

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

在这里插入图片描述

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

高桥靓仔
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
js兼容问题，鼠标相对于事件源的位置，offsetX，layerX
u013342600的专栏
02-28 2203
前几天在工作中遇见一个问题。就是要判断鼠标点击后 相对于事件源（event.target）的位置。 当然可以用event.offsetX,event.offsetY,来获取到。 但是到了FF里面就挂了。 event.layerX 也不获取不到。 干脆就自己写了个方法， function getOffsetXY(evt) { if (evt.offsetX && evt.o
使用onmousemove事件实现移动（拖拽）div 出现的关于offsetX的问题
赫兹焦耳的博客
05-11 7443
出现的问题如下图所示（截屏看不出来看log）再移动鼠标的过程中会不断的出现异常值导致拖动的div不断切换位置，回到左上角。我以为是冒泡机制导致的所以添加了下面一段阻止冒泡，随便也阻止了默认事件，但是并没有效果==================================================================ev.preventDefault();if (ev.sto...
event.offsetX ,事件
qq_45505241的博客
11-07 2445
js事件坐标大乱斗：screenX、clientX、pageX、offsetX
weixin_40581714的博客
07-06 1199
screenX: 鼠标相对于电脑屏幕的X坐标 screenY: 鼠标相对于电脑屏幕的Y坐标 clientX/clientY: 鼠标的坐标到可视区域的坐标，比如在谷歌浏览器中，指工具栏之下的区域。注意跟页面滚动无关，因为浏览器本身不滚动 pageX/pageY: 鼠标相对于整个网页主题左上角的坐标。会受到滚动影响。当无滚动时，跟client是一样的值 offsetX/offsetY： 事件发生时鼠标相对于事件源元素的坐标，获取数据类似pageX/Y，但是受到子元素影响。意思就是pageX/Y总是相对于网
原生js 解决offsetX兼容性问题
高先生的猫
05-28 546
// 针对火狐不支持offsetX/Y function getOffset(e) { var target = e.target, // 当前触发的目标对象 eventCoord, pageCoord, offsetCoord; // 计算当前触发元素到文档的距离 pageCoord = getPageCoord(target); // 计算光标到文档的距离 eventCoord = { X: window.pageXOffset + e.clie.
js鼠标点击事件在各个浏览器中的写法及Event对象属性介绍
10-27
接着，文章会介绍Event对象，这是JavaScript事件编程中的核心对象，包含了关于事件的各种信息，比如事件的类型、触发事件的元素以及事件发生时鼠标的具体位置等。现在让我们深入学习这些知识点。 首先，对于IE浏览...
JavaScript鼠标事件,点击鼠标右键,弹出div的简单实例
12-08
当右键点击发生时，我们可以获取到鼠标的坐标信息，如`offsetY`和`offsetX`，这些值分别表示鼠标相对于触发事件元素的顶部和左边的距离： ```javascript console.log(e); console.log(e.offsetY); console.log(e....
vue双击事件2.0事件监听(点击-双击-鼠标事件)和事件修饰符操作
10-15
当鼠标在指定元素上移动时，可以通过v-on指令监听mousemove事件，并在事件触发时运行JavaScript代码。mouseout事件则是在鼠标离开元素时触发。下面的示例展示了如何监听并响应这些事件： ```html {{x}} - {{y}} ...
Javascript元素位置、大小、鼠标定位操作
10-25
本文将详细介绍 Javascript 中元素位置、大小、鼠标定位操作相关的知识点，包括事件对象、DOM 对象、Style 对象等提供的相关属性和方法。 一、事件对象 Event 事件对象 Event 提供了多个属性来获取鼠标的当前位置...
js做放大镜时offsetX,offsetY抖动解决办法
desongzhang的博客
02-03 1745
在模仿淘宝放大镜效果时, 发现mask层一直抖动, 红色方框添加了onmousemove事件, 内部用到了offsetX 最后解决方案是给mask添加css属性: pointer-events: none; 原本我是想让outer作为参考系获得offsetX和offsetY的值, 所以把onmousemove事件响应函数添加到outer上, 可是这样做仅仅代表,事件冒泡到outer层才会执行回调函数, offsetX参考系并不是outer, 其实event.offsetX是以event.tar
js事件对象Event获取pageX,clientX,screenX,offsetX,layerX的方式与区别
javaloveiphone的专栏
03-22 9612
pageX:鼠标在页面上的位置,从页面左上角开始,即是以页面为参考点,同一个元素坐标不随滑动条移动而变化clientX:鼠标在页面上可视区域的位置,即是以浏览器滑动条此刻的滑动到的位置为参考点,同一个元素坐标随滑动条移动而变化.注： 1、如果元素位于body中，e.clientX + document.body.scrollLeft - document.body.clientLeft = e.p
event对象的offsetX, clientX, pageX, screenX
hardly555的博客
11-01 868
现在需要对event对象的几大与坐标有关的属性做一个总结，以便于认识 offsetX|offsetY offsetX/Y获取到是触发点相对被触发dom的左上角距离(包括padding在内，不包括border)，不过左上角基准点在不同浏览器中有区别，以内容区左上角为基准点（不包括边框），如果触发点在边框border上会返回负值。 用途：待发现 clientX|clientY和pageX|pageY clientX|clientY这对坐标相对于窗口，从窗口的顶部/左侧边缘计算得出，类似于cs.
js鼠标移入移出事件会被子元素触发解决方法
weixin_34404393的博客
04-10 1220
问题：js写了一个鼠标移入移出事件，但是发现会被内部子元素不断的触发 解决方法：建立一个空的div定位到需要触发的位置，然后设置大小和触发范围一样，最后将事件写在空的div上。 转载于:https://www.cnblogs.com/webwangjie/p/6689198.html...
js|嵌套盒模型的鼠标offsetX/Y的问题解决(含源码解析)
执念斩长河
05-24 997
因为盒子套盒子，产生offsetX/Y的问题,为了解决这样的问题利用“定位参考祖先元素”不断进行迭代，中间有对深层次原理的思考，也有算法迭代的探索，解决此类问题还需静下心来懂点原理。
javascript的offset系列属性总结
汇而不置的博客
06-16 3097
offsetLeft和offsetTop属性 offsetLeft:就是这个元素左边框外，到自己的offsetParent对象的左边框内的距离。 offsetTop:就是这个元素上边框外，到自己的offsetParent对象的上边框内的距离。 offsetParent 表示自己的偏移参考盒子。 IE9,IE9+ chrome等高级浏览器下 offstParent(表示自己的偏移参考盒子)...
图解Js event对象offsetX, clientX, pageX, screenX, layerX, x区别
細水、長流√的专栏
09-02 1576
通过 3 张图和 1 张表格，轻松区别JavaScriptEvent 对象中的offsetX, clientX, pageX, screenX, layerX, x等属性。 一、测试代码如下： <!DOCTYPE HTML> <html lang="zh-cn"> <head> <meta charset="utf-8" /&gt...
js e.offsetX 和 e.offsetY
JDDDDDDyaya的博客
11-07 2230
本人自己在写代码的过程中，一直对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
彻底搞懂 offsetX、scrollX、clientX 的区别
热门推荐
lefex的博客
03-05 1万+
无论在 iOS 还是前端开发中，关于如何定位一个元素是必须要掌握的知识，而在前端中，元素定位比较难理解，我们今天一起学习下。在 DOM 设计中，主要通过这些 API 来确定某个元素的具体...
click 鼠标点击属性里面的鼠标位置offsetX怎么填写
最新发布
05-20
鼠标位置的 offsetX 属性表示鼠标事件发生时，鼠标指针相对于触发事件的元素的水平偏移量。如果你想要获取鼠标事件发生时鼠标指针在元素内的水平位置，可以将 offsetX 属性设置为一个数字值，例如： ```javascript ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值