父元素上是mousedown.prevent，子元素会被携带方法，还阻止不了怎么办？

最新推荐文章于 2023-04-24 09:53:30 发布
最新推荐文章于 2023-04-24 09:53:30 发布
阅读量770 收藏
点赞数 1
文章标签： javascript html5 开发语言
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_61177996/article/details/126229185
版权

使用了.stop不起作用，加阻止冒泡也不起作用 

event.preventDefault()

event.stopPropagation()

上面的方法都不起作用，经过多次尝试

找到了方法

使用@mousedown.self代替@mousedown.prevent，就可以解决子元素被携带方法的问题

这样点击子元素，父元素的方法就可以不被执行了

m0_61177996
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
父元素绑定mousedown其子元素也会默认被绑上
sw_onload的博客
03-26 1163
最近在做滑块验证，从百度上找来一个使用mousedown、onmousemove、onmouseup来实现，然后点击绑定了mousedown事件的滑块，打印出来的e.target有时候会是其里面的子元素 代码如下： 打印出来的e.target 只要鼠标碰到i标签，后面移动的就是i标签，可是这并不是我想要的，我想要移动的是slider，不是一个标签。但是mousedown本身就是这样，看了文档...
【我不熟悉的javascript】使用mousedown.stop.prevent，阻止选区消失
qq_17335549的博客
10-12 1120
使用mousedown.stop.prevent，阻止选区消失
vue 子元素捕获导致其 click 事件被父元素 mousedown 事件“屏蔽掉”的问题
纯爱枫若情的博客
07-08 3976
今天在做产品的时候，碰到一个需要添加右键菜单的功能。 本来一般碰到这种问题，都是直接找找看下有没有类似的插件，毕竟比较省心，但是缺点是，需要小小的看下代码，学下api。 但是找了一圈，弹出框有不少优秀的开源插件，但是右键菜单还真是没找到合适的啊，找到几个，用的人特别少，看了下代码，感觉还不如自己开发一个。毕竟用的 vue，写起来也不是太过于繁琐。 于是说干就干，经过一段时间的劈里啪啦的奋战，终于初...
给父元素绑定事件，触发事件event.target却是子元素
weixin_41559882的博客
08-17 1846
给父元素绑定事件，触发事件event.target却是子元素。若要拿绑定事件的初始元素，可用event.currentTarget 转载https://blog.csdn.net/yang1067155909/article/details/97273820
Three.js mousedown不触发
eevee_1的博客
11-04 341
想点击3D物体触发事件，然后进行旋转操作之后再抬起的时候也会触发click事件，因此想在鼠标按下的时候记录一下鼠标位置，click触发的时候判断位置是否相等再触发事件。 但是试了好久mousedown事件怎么都不触发，最后发现是和OrbitControls冲突了。 需要去修改OrbitControls的源码，搜索mousedown找到onMouseDown函数里的event.preventDefa...
15.mouseover和mouseenter的区别，父元素设置mouseover，子元素经过会触发
piaoliangj的博客
02-05 462
15.mouseover和mouseenter的区别——软设问题总结15.1 两个事件从中文解释看出本质的差别15.2 具体区别描述 15.1 两个事件从中文解释看出本质的差别 mouseover：鼠标经过事件 mouseenter：鼠标进入事件 15.2 具体区别描述 在使用该事件无子元素下，这两者是毫无差别的； 但在多数情况下，使用该事件的元素都是有子元素的，这就两者产生了区别。 mouseover：进入绑定该事件的元素和其子元素均会触发该事件，所以有一个重复触发，冒泡过程。其对应的离开事件 mouse
Text.MouseDown.zip
03-31
基于WPF中MVVM框架的鼠标按压事件、按压、释放、左击、右击、事件
Vue在chrome44偶现点击子元素事件无法冒泡的解决方法
10-15
在Vue框架中，事件冒泡是一种常见的事件处理机制，它允许事件从子元素向父元素逐级传播。在本文中，我们将探讨一个特定的问题，即在Chrome 44浏览器中，Vue应用中偶尔出现的子元素点击事件无法冒泡到父元素的问题，...
Draggable Elements 元素拖拽功能实现代码
10-28
在JavaScript中，实现元素拖拽（Draggable Elements）功能是一项常见的任务，特别是在创建交互式用户界面时。这个功能可以通过原生的DOM事件处理程序或使用第三方库如jQuery UI、Interact.js等轻松实现。不过，为了...
unity实现UI元素跟随3D物体
08-19
Unity 实现 UI 元素跟随 3D 物体 在 Unity 中，实现 UI 元素跟随 3D 物体是非常常见的需求，例如在游戏中，需要将血条、名称、战斗力值等 UI 元素跟随人物或怪物移动。本文将详细介绍如何使用 Unity 实现 UI 元素...
点击子元素事件不触发父元素事件
05-12
点击子元素，触发子元素事件的同时不触发父元素的时间
ClickWrapper:将 mousedown、click 和 dblclick 事件包装在元素周围以提供互斥事件
06-14
将 mousedown、click 和 dblclick 事件包装在元素周围以提供互斥事件。 用法 var wrapper = new ClickWrapper(document.body, { delay: 250 }); wrapper.on('click', function (event) { // event is a generic ...
js实现触发子元素事件，而不触发父元素事件
热门推荐
一条鱼
04-17 1万+
在这之前，我们先了解一下DOM的事件对象：preventDefault() 取消事件的默认行为stopPropagation() 取消事件冒泡对当前节点无影响cancelBubble() 取消事件冒泡DOM事件处理有三个阶段：捕捉阶段（capture phase）：从最上层元素，直到最下层（你点击的那个target）元素。路过的所有节点都可以捕捉到该事件。命中阶段（target phase）：如果...
Vue @click.stop 与 @mousewheel.prevent
走在搬砖的路上！
07-12 609
@click.stop 点击子标签不需要触发父标签的事件 <div @click="tempClick"> <div @click.stop="subTempClick"></div> </div> 盖上遮罩之后不需要下面内容支持滚动 @mousewheel.prevent 表示添加了这个修饰符的标签以下的标签内容无法接受滚动事件 <div class="mask"></div> <div class="content".
在vue中盒子大小由两个控件来拖拽调整的代码，其中一个控件负责宽度，另一个负责高度
l10103的博客
04-24 473
【代码】在vue中盒子大小由两个控件来拖拽调整的代码，其中一个控件负责宽度，另一个负责高度。
关于 Element-ui Dialog 引用时，在弹窗上 mousedown 后再在遮罩层 mouseup 引发的意外弹窗关闭问题的处理方案
qq_37750365的博客
11-27 1255
问题： Element-UI 作为当前较为成熟的 Vue 框架的 UI 组件，能有效的提高特异性不强的项目的界面开发。但是，作为一个要兼备处理多方面问题的第三方库，Element-UI 也存在着一些问题。比如 <el-dialog>。 在引用 <el-dialog> 时，尤其是将其作为编辑弹窗时，常常会有一个问题，便是在使用鼠标滑动选取弹窗中做文本选择时，若不注意将光标滑到弹窗窗体之外的遮罩层处，此时松开鼠标，就会导致弹窗被关闭掉的现象，十分影响使用体验。 当然，这种情况也有一
Vue事件修饰符都在这里啦
偷只猫来养的博客
08-19 475
Vue事件修饰符 （1）.lazy：用于将绑定input框的input事件改为change事件 （2）.self：对冒泡事件来说，设置了.self时，移入当前元素的子元素不会冒泡到当前元素，但是移入到子元素的子元素时会继续冒泡到子元素，总结来说就是：用于捕获冒泡，即有冒泡发生时，有该修饰符的dom元素会先执行，如果有多个，从外到内依次执行，然后再按自然顺序执行触发的事件；对设置了self的本身也是具有冒泡性质的 <!--设置一个时，移入子元素不会冒泡到当前元素，但是移入到子元素的子元素会冒泡到当前元素
Vue input的blur事件影响下拉框中点击事件的解决方案 用mousedown/mousedown替代click
真爱一生的博客
01-12 696
input blur
html注释代码是什乄1 7,index.html
weixin_39891694的博客
06-18 457
...content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">window.yluiVersion = '2.1.9';document.write('');document.write('');document.write('');...0...
fabric.js 判断是否点击的是canvas中某个元素的子元素
最新发布
09-25
### 回答1： 你可以使用 fabric.js 中的 `event.target` 属性来判断用户是否点击的是某个元素的子元素。 首先，你需要为 canvas 绑定一个 "mousedown" 事件。然后你可以通过检查 `event.target` 属性是否为某个元素的子元素来判断是否点击的是该元素的子元素。 例如： ```javascript canvas.on('mouse:down', function(event) { if (event.target) { // event.target 代表用户点击的元素 var clickedElement = event.target; // 检查是否为某个元素的子元素 if (clickedElement.isContainedWithinObject(someElement)) { // 点击的是 someElement 的子元素 } } }); ``` 注意：在这里，`someElement` 是你想要判断的元素。 希望这能帮到你！ ### 回答2： 在fabric.js中，我们可以通过判断事件对象的target属性来判断是否点击的是canvas中的某个元素的子元素。 首先，我们需要在canvas上添加一个事件监听器，监听鼠标点击事件。当事件触发时，事件对象会包含target属性，这个属性指向被点击的元素。 如果我们要判断点击的是某个元素的子元素，可以通过递归的方式遍历这个元素的所有子元素，然后判断事件对象的target属性是否与其中的某个子元素相同。 下面是一个示例代码： ```javascript // 创建一个canvas元素 var canvas = new fabric.Canvas('c'); // 添加点击事件监听器 canvas.on('mouse:down', function(event) { var target = event.target; if(target && target.subTarget) { console.log("点击的是元素的子元素"); } else { console.log("点击的是元素本身或者其他地方"); } }); // 创建一个父元素和一个子元素 var rect1 = new fabric.Rect({ left: 50, top: 50, width: 100, height: 100, fill: 'red' }); var rect2 = new fabric.Rect({ left: 60, top: 60, width: 80, height: 80, fill: 'blue' }); rect1.subTarget = rect2; // 把子元素添加到父元素上，并将父元素添加到canvas上 rect1.add(rect2); canvas.add(rect1); ``` 在上面的示例中，我们创建了一个父元素rect1和一个子元素rect2，然后把子元素添加到父元素上，并将父元素添加到canvas上。当点击canvas时，如果点击的是子元素rect2，那么控制台会输出"点击的是元素的子元素"；如果点击的是父元素rect1，或者其他地方，控制台会输出"点击的是元素本身或者其他地方"。 通过这种方式，我们可以判断点击的是否是canvas中某个元素的子元素。 ### 回答3： 在fabric.js中，要判断某个元素是否为Canvas中的子元素，可以使用以下的方法: 1. 获取点击事件的坐标位置。监听点击事件，获得鼠标点击的坐标位置，可以通过使用`e.clientX`和`e.clientY`获取。 2. 利用`fabric.js`的`fabric.util`工具类中的`getKlass`方法，通过click事件坐标找到点击的元素。 3. 判断点击的元素是否为Canvas中的子元素。通过`obj.findTarget()`方法来找到canvas中的子元素。 下面是一个示例代码： ```javascript canvas.on('mouse:down', function(e) { var clickX = e.e.clientX; var clickY = e.e.clientY; var target = canvas.findTarget(e.e); var subElement = target.findTarget(clickX, clickY); if (subElement) { console.log('点击的是某个元素的子元素'); } else { console.log('点击的不是任何元素的子元素'); } }); ``` 通过监听`mouse:down`事件，获取点击坐标后，使用`findTarget`方法找到点击的元素，再使用`findTarget`方法查找该元素的子元素。如果找到了子元素，则可以判断点击的是某个元素的子元素。 希望能对你有所帮助！

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值