vue @click.stop阻止冒泡事件的发生

最新推荐文章于 2024-05-09 12:10:41 发布
最新推荐文章于 2024-05-09 12:10:41 发布
阅读量496 收藏 5
点赞数 7
分类专栏： vue 文章标签： vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_45815557/article/details/134597940
版权

在写的时候外围有一个父标签卡片card，父标签包含了一个按钮，但是父标签上有点击事件，按钮上也有点击事件，如果按钮被禁用了，那么点击按钮会触发到卡片的点击事件，发生冒泡事件
在这里插入图片描述
正确代码：
在按钮外再加一层，给按钮外围的标签加上@click.stop便阻止了冒泡事件的发生
在这里插入图片描述

芋泥是小蓝白
关注
  • 7
    点赞
  • 踩
  • 5
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
一个因@click.stop引发的bug的解决
10-17
总结来说，本文主要讲解了如何解决一个由`@click.stop`修饰符引发的问题，涉及到了前端事件冒泡、Vue组件的事件处理以及Element UI Popover组件的工作机制。通过深入理解和分析，我们成功地找到了问题的原因，并给出...
解决VUE框架 导致绑定事件的阻止冒泡失效问题
08-27
Vue框架中绑定事件的阻止冒泡失效问题解决方案 在Vue框架中，绑定事件的阻止冒泡失效问题是一个常见的问题。当我们使用Vue框架时，因为框架内部对DOM的处理，导致绑定事件的阻止冒泡失效。下面我们将探讨这个问题的...
@click.stop作用(阻止点击事件继续传播，即阻止事件冒泡)
qq_32184753的博客
07-10 2万+
<div id="app"> <div v-on:click="dodo"> <button v-on:click="doThis">阻止单击事件继续传播</button> </div> </div> <script> var app = new Vue({ el: "#app", dat
Vue：@click.stop -- 阻止事件向祖先元素传递（事件冒泡）
孙悟空
06-30 9500
最近遇到这么一个问题：有一个父div，包含一个子div。要求点击父div值执行fun()函数，而点击子div时不执行fun()函数。
Vue中@click.stop和@click.prevent实例详解
最新发布
菜鸟教程
05-09 611
到此这篇关于Vue中@click.stop和@click.prevent详解的文章就介绍到这了,更多相关Vue中@click.stop和@click.prevent内容请搜索网赚博客https://www.piaodoo.com/以前的文章或继续浏览下面的相关文章希望大家以后多多支持网赚博客https://www.piaodoo.com/！茂名一技http://www.szsyby.net/茂名一技http://www.enechn.com/美文集http://www.tpyjn.cn/
@click.stop阻止外层的click冒泡
vicky_yongqi的博客
11-19 278
点击播放却没有播放，但总点进播放器： 代码这里：
Vue实战（07）Vue中的@click.stop和@click.prevent
綦枫Maple的博客
05-06 5256
@click.stop：阻止事件冒泡，即阻止点击事件从子组件向父组件传播
事件修饰符@click.stop,@click.prevent&css样式穿透 pointer-events: none
m0_37751401的博客
12-15 872
事件冒泡，事件捕获，事件穿透
vue click.stop阻止点击事件继续传播的方法
10-18
总之，`vue click.stop`是Vue.js中用于阻止点击事件冒泡的一种方法，通过在事件绑定上添加`.stop`修饰符，我们可以确保事件处理只在目标元素上执行，不会影响到其他层级的元素。这在构建响应式和模块化的前端应用时...
vue绑定的点击事件阻止冒泡的实例
08-28
vue绑定的点击事件阻止冒泡的实例 在本篇文章中，我们将探讨如何在 Vue 中绑定点击事件，并阻止事件冒泡。事件冒泡是一种常见的事件机制，在 DOM 事件流中，事件会从最特定的事件目标到最不特定的事件目标...
@click.stop的作用
逆风优雅的博客
03-21 2338
@click.stop表示阻止事件向外传播（即: 阻止事件冒泡） 代码演示 <template> <div id="app"> <div v-on:click="dodo"> <button v-on:click.stop="doThis">阻止点击事件继续向外传播</button> </div> </div> </template> <script> ex
js-@click.stop与@click.prevent
2301_76671906的博客
09-26 680
@click.stop与@click.prevent阻止事件冒泡执行
Vue基础语法之@click、时间修饰符@click.stop与@click.prevent、按键修饰符（如@keyup.enter）
baicai_123的专栏
12-21 1406
1、绑定监听@click:（以监听click为例，其他如keyup，用法类似）   v-on:click="fun"   @click="fun"   @click="fun(参数)" <button @click="test1">test1</button>  <button @click="test2('abc')">test2&...
Vue的@click、@click.prevent、@click.stop
程邓楠的博客
07-11 1万+
1、@click，绑定监听（单击事件） v-on:click="function" @click="function" @click="function(params)" <button id="test1" @click="test1">test1</button> <!-- params：参数 --> <button id="test2" @click="test2('parpams')">test...
Vue之@click、事件修饰符@click.stop与@click.prevent、按键修饰符@keyup.enter
weixin_30919919的博客
08-08 274
1、绑定监听@click: （以监听click为例，其他如keyup，用法类似） v-on:click="fun" @click="fun" @click="fun(参数)" <button @click="test1">test1</button> <button @click="test2('abc')">test2<...
Vue中@click.stop与@click.prevent
热门推荐
weixin_42260975的博客
03-12 3万+
Vue中@click.stop与@click.prevent 一、@click.stop 问题：父元素中添加了一个click事件，其下面的子元素中也添加了click事件，此时，我想点击子元素获取子元素的点击事件，但却触发的是父元素的事件： <view class="footer-box" @click="clickCard"> <view @click="footerClick('喜欢')"><text class="footer-box__item">喜欢</
@click.stop是什么事件
12-30
@click.stop是Vue.js中的一个事件修饰符，用于阻止事件冒泡。事件冒泡是指当一个元素上的...在上述示例中，当点击内层的div元素时，click2()方法会被触发，而click1()方法不会被触发，因为@click.stop阻止了事件冒泡。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值