(vue)父元素和子元素都绑定了事件，阻止事件冒泡

最新推荐文章于 2024-04-29 16:59:45 发布
最新推荐文章于 2024-04-29 16:59:45 发布
阅读量6.1k 收藏 1
点赞数
分类专栏： 前端 问题及解决办法 文章标签： 事件冒泡 父子元素都绑定事件
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_38372358/article/details/80007124
版权 
<li @click="funcP">列表1 <span @click="funcSon">删除</span> </li><li>列表2</li>

问题描述：点击“删除”span标签，删除列表1后，会触发funcp（点击变高亮）使列表2高亮

原因：发生事件冒泡，执行完子元素绑定的事件后，又执行了父元素的事件

解决办法：阻止冒泡  

 <span @click.stop="funcSon">删除</span>

yuan_1005_85
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
vue 父元素点击不触发子组件_vue 在父组件里阻止子组件的点击事件
weixin_28678831的博客
01-17 3622
子组件的代码importExiffrom'exif-js'exportdefault{data(){return{headerImage:'/static/images/add.jpg',picValue:''}},methods:{addPic(){letfile=this.$refs.filefil...
阻止子元素的事件冒泡到父元素
houshufen
12-26 1100
在项目中我们常常遇到这样一个问题：就是一个父元素里面有很多子元素，父元素和子元素都会有点击事件，当我们点击子元素的时候，不希望触发父元素的点击事件。 案例：购物车列表，想要点击增加或减少按钮时不希望触发父元素的点击事件进入详情页。 在子元素的点击事件中加入： //阻止click事件冒泡到父元素 event.stopPropagation(); 这样问题就解决啦。 ...
解决vue项目中使用Mint-UI遇到的一些问题
linfng023的博客
05-09 461
1.绑定事件 在表单编辑器组件中绑定事件不起作用的解决方法 ########## 在你绑定的事件上加上**.native.capture**，例如**@blur.native.capture=“handlerChange”** 2.日期组件 在设置日期组件的开始和结束日期在苹果系统格式错误问题 ...
Vue进阶（幺捌贰）：父子组件元素获取、方法互相调用_父组件两个子组件互相调用
最新发布
2401_84411522的博客
04-29 353
做参数缓存，实现值传递。此方法不限于父子组件，只要组件位于同一页面都可使用，但因为不符合。元素对象，通过模拟点击的方式触发元素绑定的方法，通过本地。父组件把方法传入子组件中，在子组件里直接调用这个方法。向父组件触发一个事件，父组件监听这个事件。来调用父组件的方法。由于最终所有组件都会渲染成真实的。规范，并非特殊情况不建议使用。子组件 更简便的写法。
vue阻止子元素触发父元素的事件，事件冒泡处理
java_xxxx的博客
02-24 5398
vue阻止子元素触发父元素的事件，事件冒泡处理
关于在Vue中如何阻止子元素触发父元素的事件
m0_49358183的博客
08-24 8330
起因： 我希望点击li盒子时下拉一个弹层详情 但是希望点步进器时不触发改点击事件。 一般情况下： <div class="step" @click.stop=""> </div> //子盒子 只需要在盒子上直接用绑定click.stop事件即可； 然而 ， 当在使用一些UI框架的情况下时 ， 直接使用则会失效； 此时的解决方案则是在改UI标签外层再套一个盒子然后绑定click.stop事件即可 <div class="step" @click.
vue中父元素点击事件与子元素点击事件冲突
起个类名好难的博客
12-07 1万+
vue中父元素点击事件与子元素点击事件冲突 在做vue项目的时候，遇到子元素有点击事件，父元素也有点击事件，当点击子元素时往往触发的是父元素的点击事件，产生冲突，怎样解决这个问题呢？这就用到vue事件中的事件修饰符，官网地址https://cn.vuejs.org/v2/guide/events.html#%E4%BA%8B%E4%BB%B6%E4%BF%AE%E9%A5%B0%E7%AC%A6...
重新认识vue之事件阻止冒泡的实现
10-18
在Vue中，事件冒泡通常会在组件嵌套的情况下造成问题，比如在一个组件内部的子组件上触发的事件会同时被父组件捕获。本文将深入探讨如何在Vue中阻止事件冒泡。 首先，让我们看看事件冒泡的表现。假设你有一个列表，...
Vue在chrome44偶现点击子元素事件无法冒泡的解决方法
10-15
在Vue框架中，事件冒泡是一种常见的事件处理机制，它允许事件从子元素向父元素逐级传播。在本文中，我们将探讨一个特定的问题，即在Chrome 44浏览器中，Vue应用中偶尔出现的子元素点击事件无法冒泡到父元素的问题，...
浅谈vue中组件绑定事件时是否加.native
10-16
事件绑定是Vue中组件交互的核心机制，它使得父组件能够监听子组件的行为并作出响应。在Vue中，我们可以使用`.native`修饰符来决定事件绑定的行为。本文将深入探讨Vue组件绑定事件时是否需要添加`.native`修饰符及其...
vue实现鼠标移入移出事件代码实例
10-17
值得注意的是，由于事件冒泡机制，父元素可能会捕获子元素的事件。在实际应用中，可能需要使用`event.stopPropagation()`防止事件向上冒泡，确保事件只在目标元素上触发。 8. **组件化思想**： 这段代码可以视为...
关于vue组件事件属性穿透详解
10-16
总的来说，Vue组件的事件属性穿透是通过`$attrs`和`$listeners`来实现的，它们使得父组件的属性和事件监听器可以灵活地应用于子组件的任何元素，增强了组件间的通信能力。正确理解和使用这两个特性，可以极大地提高...
vue开发父元素和子元素都绑定了事件，阻止事件冒泡
qq_35504206的博客
04-26 7035
&lt;div @click="a"&gt; &lt;button @click="b"&gt;&lt;/button&gt; &lt;/div&gt;事件描述：当触发button的事件a时，b事件也会被触发解决办法：在button上添加@click.stop="b"，来阻止事件冒泡。...
父元素与子元素的点击事件影响问题
人生不止眼前的电脑！
06-15 1万+
例如以下的代码： html：<div class="elementI" style="height: 100px;width: 100px;border: 1px solid red;"> 父元素 <div class="elementII" style="height: 50px;width: 50px;border: 1px solid black;">子元素</div> </
JavaScript-父子dom同时绑定两个点击事件，一个用捕获，一个用冒泡时执行顺序
热门推荐
柒青衿的博客
05-12 1万+
JavaScript-在父元素与子元素都绑定多个事件时执行顺序事件的执行顺序绝对是让人头疼的问题。当父元素与子元素都绑定了多个事件，且有的绑定在冒泡阶段、有的绑定在捕获阶段时，事件的触发顺序如何？如果你只关心这个问题，请直接下滑到3. 绑定多个事件，且由用户行为触发。如果你想细致了解JavaScript中的事件发生，请慢慢阅读。1. 原生事件的发生顺序一般来讲，当为一个a标签添加click事件以后，
vue 阻止事件冒泡
08-12
另一种方法是使用Vue的修饰符`.stop`，在事件绑定处使用`.stop`修饰符可以更简洁地实现阻止事件冒泡的功能。例如，在父元素上添加点击事件，并在子元素的点击事件绑定处使用`.stop`修饰符，即可阻止事件冒泡。所以，...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值