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

最新推荐文章于 2023-10-25 13:58:14 发布
最新推荐文章于 2023-10-25 13:58:14 发布
阅读量784 收藏
点赞数
分类专栏： javascript html 文章标签： javascript html 前端
原文链接：http://t.zoukankan.com/lin02-p-15036397.html
版权

【问题】

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

【原因】

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

【解决】

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

onClick="event.cancelBubble = true"

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

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

TwoBE9876
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
在点击div中的p时，如何阻止事件冒泡
08-31
本文主要介绍了在点击div中的p时，如何阻止事件冒泡的方法，具有很好的参考价值，下面跟着小编一起来看下吧
react antd阻止Checkbox事件冒泡（折叠面板标题中增加复选框，阻止点击复选框折叠面板展开/折叠）
坚强的泡沫的博客
06-27 1413
react antd阻止Checkbox事件冒泡（折叠面板标题中增加复选框，阻止点击复选框折叠面板展开/折叠）
阻止事件冒泡的方法
candy_tity的博客
11-17 4788
一、什么是事件冒泡 事件有好多种，最为常用的就是点击事件。在我们想执行点击事件的时候，通常是想让点击某个元素的时候执行某个事件，而冒泡事件就是指在点击这个元素的时候执行了这个事件，而同时它的父元素也执行了这个事件。 如下面的代码： <body> <div> <a href="javascript:;">点击</a> </div> </body> <script t
如何阻止事件冒泡和默认事件
最新发布
wangxuanyang_zer的博客
10-25 665
阻止事件冒泡和默认事件是Web开发中的重要技巧，可以帮助您实现更复杂的交互行为和提供更好的用户体验。了解如何使用event.stopPropagation()和event.preventDefault()是处理事件的基本技能，尤其在需要精细控制事件流和默认行为时。同时，谨慎使用这些技术，以确保用户体验的一致性和可用性。
一个div盒子，两个点击事件，互不干扰，可以使用阻止事件冒泡
新人一枚，互相学习哦！
07-24 1103
阻止事件冒泡
阻止冒泡事件
weixin_67490903的博客
05-25 877
何为冒泡： 即事件开始是由最具体的元素接收，然后逐层向上级传播到较为不具体的元素。 加入一个button和它的父级div同时定义了onclick事件，点击button时，在触发了button的onclick事件之后，会发生事件冒泡，然后触发div的onclick事件，然而，触发button的onclick事件的同时也触发div的onclick事件显然不是我们想要的，此时，可以阻止冒泡事件。 方法一： event.stopPropagation(); 这个方法会阻止冒泡事件，但是不会阻止默认事件
vue绑定的点击事件阻止冒泡的实例
11-29
当我们在使用vue做项目时，经常用到点击事件的绑定，但是我们绑在一个div上，里面的其他按钮（如删除、修改）等按钮也会加载这儿div的点击事件，而事实我们不需要，如何解决： 首先我们来区分事件冒泡、事件捕获是...
vue中阻止click事件冒泡,防止触发另一个事件的方法
12-28
使用vue阻止子级元素的click事件冒泡，很简单，用stop ...以上这篇vue中阻止click事件冒泡,防止触发另一个事件的方法就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持软件开发网。
JQuery中阻止事件冒泡几种方式及其区别介绍
12-09
JQuery 提供了两种方式来阻止事件冒泡。 方式一：event.stopPropagation(); 代码如下: $(“#div1”).mousedown(function(event){ event.stopPropagation(); }); 方式二：return false; 代码如下: $(“#div1”)....
解决/阻止 div层内的div层点击事件冒泡触发的小方法
Effotzjw_小白慢慢踏全栈
04-27 1307
两个层都绑定了点击事件，但是点击in层的时候，同时也会触发out层的点击事件。但是他并不希望触发out的点击事件，只希望触发in层的点击事件，该怎么处理。页面代码： <div style="width: 400px;height: 400px;background-color: #678678;" id="outDiv"> out <div style="wid...
多个div嵌套，获取鼠标所点击的div对象
weixin_30553837的博客
07-19 343
我选择的是冒泡事件 $(function() { $("#主divID").on("click",function(e) {//主div是必须存在的 //冒泡事件 var e=e||window.event; va...
div嵌套点击事件,div嵌套点击阻止冒泡
讓之的博客
08-22 7251
页面中嵌套的两个div都存在点击事件，当点击内部div阻止外部div点击事件的发生； 需要注意的一点，在实际的页面中可能中间有多层嵌套关系，像下图，在div1和div2中间可能还会有几层嵌套关系，这就不一定非要在要点击的子元素div2上加监听事件，可以再往上取一级或多级，只要在条件的div1元素下就可以，具体因需要而定。 方式1： //1.正常的情况下使用 $("#div2").cli.........
如何阻止事件冒泡
庸人方自扰，自在就好
01-27 1万+
1、事件处理过程中，阻止了事件冒泡，但不会阻止默认行为（执行超链接的跳转）2、事件处理过程中，阻止了事件冒泡，也阻止了默认行为（不执行超链接的跳转）3、事件处理过程中，不阻止事件冒泡，但阻止默认行为（父元素以上全部会触发该事件，但不执行超链接跳转）
【工作笔记】点击div中的内部元素，防止事件冒泡
戴璟昊的博客
10-16 2778
工作中遇到的一个需求，点击外部div跳转页面，点击div中的某个内部元素，跳转到另一个页面，之前没有处理过这种问题，上网查找了一些资料了解到，这里面涉及到事件的冒泡机制。
event.cancelBubble=true e.stopPropagation() 取消事件处理，阻止事件
10年老码农
10-18 3424
&lt;tr&gt;&lt;a href="xxx"&gt;连接&lt;/a&gt;&lt;/tr&gt; 如上结构，单击tr的时候跳转至另一页   &lt;tr style="cursor:pointer" onmouseover="this.style.backgroundColor='gainsboro'" onmouseout="this.
js处理一个div里面多个点击事件时出现的事件冲突 重复的解决方法 事件冒泡
05-29 1万+
div class="form-group" id="dd4bbe73-8dcb-422c-b8a8-5cb271362192"> div class="context" id="0">div class="col-sm-10"> class="form-control-static">a class="controlA" href="#">蔡文昌class="type-span"
vue 阻止事件冒泡常用的方法
热门推荐
花生日记
05-30 1万+
在这个例子中，我们在 `@click` 事件上添加了 `.stop` 修饰符，这样就可以阻止事件冒泡，只触发 `childClick` 方法。在这个例子中，当点击按钮时，只会触发 `childClick` 方法，而不会触发 `parentClick` 方法。在事件处理函数中，可以通过调用事件对象的 `stopPropagation()` 方法来阻止事件冒泡。2. event.stopPropagation()：在方法中使用，阻止事件冒泡。1. @click.stop：在模板中使用，阻止点击事件冒泡。
在Vue中如何不处理内部元素触发的事件？
重楼的博客
10-07 702
在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
vue3中如何给一个div绑定多个点击事件
05-27
在 Vue3 中，可以使用 `@click` 或 `v-on:click` 指令来绑定一个点击事件，如果要绑定多个点击事件，可以使用以下两种方式： 1. 在模板中分别绑定多个 `@click` 或 `v-on:click` 指令，每个指令对应一个点击事件。 ...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值