div嵌套多个点击事件,点击后如何阻止多次事件触发冒泡

最新推荐文章于 2024-07-25 20:08:25 发布
转载 最新推荐文章于 2024-07-25 20:08:25 发布 · 980 阅读 · 0 ·
CC 4.0 BY-SA版权
原文链接：http://t.zoukankan.com/lin02-p-15036397.html
文章标签：

#javascript #html #前端

文章讨论了在HTML中，一个div元素内两个点击事件导致的问题。当点击删除按钮时，不希望触发父级的弹窗事件。提出了两种解决方案：一是给子级按钮添加`event.cancelBubble=true`以阻止事件冒泡；二是直接在父级事件上设置`window.event.cancelBubble=true`来禁止其他事件触发。

【问题】

如图：一个div下有两个点击事件

【原因】

点击删除按钮后，还会触发弹窗。所以我们要解决点击删除按钮后不让它再次触发弹窗事件。

【解决】

方法1.可以尝试在子级标签添加属性

onClick="event.cancelBubble = true"

方法2.直接从根上解决（在你像要触发一次的事件上加 window.event.cancelBubble = true;//禁止冒泡（禁止其他事件触发））

window.event.cancelBubble = true;//禁止冒泡（禁止其他事件触发）

Vue3 - Element Plus 下拉菜单 el-dropdown 阻止冒泡传递到上层触发事件，解决 dropdown 下拉菜单组件被容器元素包裹时点击事件触发，会连带触发外层包裹容器的点击事件
🏆 前端领域优质创作者
02-27 3690
vue3，elementplus，el-dropdown，stop，command，使用.stop无效，下拉菜单组件，下拉菜单Dropdown，点击事件冒泡，@command如何绑定stop修饰符，阻止事件冒泡，使用el-dropdown下拉菜单阻止事件冒泡，阻止了点击事件冒泡，触发了父元素怎么办，click点击时带动了外层元素的点击事件咋办，如何解决vue3使用下拉菜单组件时，点击触发方式会连同上层div同时触发click点击，elementplus组件自带的事件如何阻止其冒泡，阻止内层冒泡，将dro
div嵌套点击事件,div嵌套点击阻止冒泡
讓之的博客
08-22 7785
页面中嵌套的两个div都存在点击事件，当点击内部div阻止外部div点击事件的发生； 需要注意的一点，在实际的页面中可能中间有多层嵌套关系，像下图，在div1和div2中间可能还会有几层嵌套关系，这就不一定非要在要点击的子元素div2上加监听事件，可以再往上取一级或多级，只要在条件的div1元素下就可以，具体因需要而定。 方式1： //1.正常的情况下使用 $("#div2").cli.........
在点击div中的p时，如何阻止事件冒泡
08-31
本文主要介绍了在点击div中的p时，如何阻止事件冒泡的方法，具有很好的参考价值，下面跟着小编一起来看下吧
在Vue中如何不处理内部元素触发的事件？
重楼的博客
10-07 937
在Vue中如何不处理内部元素触发的事件？方法一 事件修饰符.self方法二 事件修饰符.stop方法三 event.target 方法一 事件修饰符.self <div class="mask" @click.self="close"> <div class="mask-content"></div> </div> 方法二 事件修饰符.stop <div class="mask" @click="close"> &lt
一个div盒子，两个点击事件，互不干扰，可以使用阻止事件冒泡
新人一枚，互相学习哦！
07-24 1708
阻止事件冒泡
阻止div的点击事件冒泡
weixin_66196770的博客
06-09 612
我的想法💡：点击内层的div我要执行自己内层div的change事件，但是不要触发外层div的点击事件。解决办法：一行代码搞定 onClick="event.cancelBubble = true"inactive-text="公开"active-text="隐私"情景：两个div是嵌套关系，大的div包住小的div。简单百度了下，发现是由于事件冒泡原因导致的。
利用JQuery阻止事件冒泡
10-20
在Web开发中，事件冒泡是JavaScript中一个重要的机制，当一个元素上发生了事件，比如点击、鼠标经过等，这个事件不仅会在该元素上触发，还会向上传播到更高级的元素，如父元素、祖父元素等。这样的设计便于我们对一...
jQuery事件绑定和解绑、事件冒泡与阻止事件冒泡及弹出应用示例
10-17
在阻止事件冒泡的示例中，定义了三个嵌套的`div`元素，分别对应`son`、`father`和`grandfather`。通过`.click()`方法分别绑定了点击事件，当点击`son`时，依次弹出1、2、3三个提示框，因为事件从子元素冒泡到父元素...
js阻止默认事件与js阻止事件冒泡示例分享 js阻止冒泡事件
12-02
这意味着当触发一个事件时，该事件不会按照其预设的方式执行。例如： - 对于`<a>`标签，点击后通常会跳转到指定的URL。 - 对于`<button>`、`<input type="radio">`等表单元素，它们都有自己的默认行为，如提交表单...
js点击事件的执行过程实例分析【冒泡与捕获】
10-15
在下面的示例中，我们有三个嵌套的`div`元素，分别绑定了点击事件。通过`addEventListener`绑定的事件监听器设置了第三个参数为`false`，因此它们将在冒泡阶段触发。 ```html <div class="box" onclick="firstClick...
解决/阻止 div层内的div层点击事件冒泡触发的小方法
热门推荐
abb的码农部落格
10-25 1万+
两个层都绑定了点击事件，但是点击in层的时候，同时也会触发out层的点击事件。但是他并不希望触发out的点击事件，只希望触发in层的点击事件，问我怎么处理。 e.stopPropagation();//终止事件冒泡
阻止冒泡事件
weixin_67490903的博客
05-25 975
何为冒泡： 即事件开始是由最具体的元素接收，然后逐层向上级传播到较为不具体的元素。 加入一个button和它的父级div同时定义了onclick事件，点击button时，在触发了button的onclick事件之后，会发生事件冒泡，然后触发div的onclick事件，然而，触发button的onclick事件的同时也触发div的onclick事件显然不是我们想要的，此时，可以阻止冒泡事件。 方法一： event.stopPropagation(); 这个方法会阻止冒泡事件，但是不会阻止默认事件
阻止事件冒泡
键指江湖的博客
04-26 915
阻止事件冒泡 div{ width: 400px; height: 200px; background: gray; } <button id="oBtn">点击</button> <div id="div" style="display: none"></div> 1.JavaScript·阻止事件冒泡 window.o...
阻止事件冒泡的方法
candy_tity的博客
11-17 5067
一、什么是事件冒泡 事件有好多种，最为常用的就是点击事件。在我们想执行点击事件的时候，通常是想让点击某个元素的时候执行某个事件，而冒泡事件就是指在点击这个元素的时候执行了这个事件，而同时它的父元素也执行了这个事件。 如下面的代码： <body> <div> <a href="javascript:;">点击</a> </div> </body> <script t
如何阻止事件冒泡？
最新发布
一个做过前端开发的产品经理，经历过睿智产品的折磨导致脱发之后，励志要翻身"农奴"把歌唱，一边打入敌人内部一边持续提升自己，为我们广大开发同胞谋福祉，坚决抵制睿智产品折磨我们码农兄弟！
07-25 1778
除了原生的DOM事件之外，我们还可以创建自定义事件来实现更复杂的事件处理逻辑。自定义事件同样遵循事件冒泡的规则，但我们可以更灵活地控制事件的传递。});});理解事件冒泡的概念及其如何在DOM中工作是非常重要的。通过阻止事件冒泡，我们可以更精确地控制事件的处理流程，并避免不必要的副作用。在实践中，合理利用事件冒泡和事件委托可以帮助我们编写更高效、更易于维护的代码。希望本文能够帮助你在未来的项目中更好地利用这些技巧。以上就是关于如何阻止事件冒泡的详细介绍。
【工作笔记】点击div中的内部元素，防止事件冒泡
戴璟昊的博客
10-16 2941
工作中遇到的一个需求，点击外部div跳转页面，点击div中的某个内部元素，跳转到另一个页面，之前没有处理过这种问题，上网查找了一些资料了解到，这里面涉及到事件的冒泡机制。
如何阻止事件冒泡和默认事件
wangxuanyang_zer的博客
10-25 3037
阻止事件冒泡和默认事件是Web开发中的重要技巧，可以帮助您实现更复杂的交互行为和提供更好的用户体验。了解如何使用event.stopPropagation()和event.preventDefault()是处理事件的基本技能，尤其在需要精细控制事件流和默认行为时。同时，谨慎使用这些技术，以确保用户体验的一致性和可用性。
easyui datagrid 单击删除时阻止时间冒泡
897371388
11-21 335
最近用easyui做东西，一次在datagrid中做删除功能，追简单的就是formatter中return出一个&lt;a&gt;删除&lt;/a&gt;,但是在最后突然发现单击一下删除按钮会选中，再次单击一下就会撤销选中，突然就像起了事件冒泡所以做了一下总结。 以下是具体代码。 /* * 阻止事件冒泡 * */ function preventBubble(){if($.browser...
怎么让两个嵌套的点击事件同时触发
06-08
要让两个嵌套的点击事件同时触发，可以使用事件冒泡的机制。当子元素的点击事件被触发时，该事件会向上冒泡到父元素，并依次触发父元素的点击事件，直到冒泡到文档根节点。因此，可以在父元素的点击事件中触发子元素...
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值