vue--点击事件阻止冒泡的方法

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

vue—click点击事件的冒泡行为

**1. click.stop就是外层包内层，内层写了.stop不会触发到外层的，只触发内层

  1. .prevent就是阻止默认跳转链接，比如写了一个百度链接，没有
  2. prevent会默认跳转到百度网页，写了这个prevent就会阻止自动跳转行为
  3. .capture就是外层包内层，外层写了capture行为，只会触发外层，而内层是先触发外层，再触发内层
  5. .self就是外层包内层，内层包按钮事件，内层写了.self行为，外层只会触发外层，内层先触发内层，再外层，点击按钮事件，先触发按钮事件，再触发外层，不会触发内层
  7. 、click.prevent.once就是，第一次点击触发hrfe，不会跳转链接，第二次点击就会跳转链接**
@逆风boy
关注
  • 1
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
VUE的阻止冒泡事件
-拜托小羊
05-30 1477
vue中的阻止冒泡事件可以帮助我们实现当子盒子被点击时，父盒子不被触发对应的点击事件。
Vue 阻止事件冒泡
PB瓦工
01-17 1918
【代码】Vue 阻止事件冒泡。
Vue中@click.stop和@click.prevent实例详解
最新发布
菜鸟教程
05-09 516
到此这篇关于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/
Vue阻止事件冒泡的两种方式
雨天的麦子的博客
10-09 6087
1.阻止事件冒泡方式1 如下有父子标签的点击事件 在子类中调用stopPropagation()方法即可禁止事件的传递 boxClick:function () { alert("父标签被点击"); }, subClick:function (event) { event.stopPro...
vue中阻止冒泡事件
qq_40666120的博客
05-12 1万+
vue冒泡事件 事件冒泡是指发生在子元素身上的事件，会冒泡至父元素身上。如我们在子元素身上点击后，也会触发父元素的点击事件，若不及时阻止，该事件还会一级一级冒上去。事件冒泡这个行为是默认存在的，故需要我们进行及时的阻止 <script> window.onload = function(){ var vm = new Vue({ el:'#app', data:{ }, met
Vue：@click.stop -- 阻止事件向祖先元素传递（事件冒泡）
孙悟空
06-30 9105
最近遇到这么一个问题：有一个父div，包含一个子div。要求点击父div值执行fun()函数，而点击子div时不执行fun()函数。
vue项目遇见事件冒泡如何处理
fury的博客
10-26 5133
如下图，当我们点击页面某个元素时，会产生点击事件，事件由外到内，逐层递进（事件捕获阶段，途中的1->2->3->4），当目标元素捕捉到目标事件时，会响应事件，并由内到外，逐层往外传递(事件冒泡阶段，图中的4->5->6->7)，这便是事件冒泡。正式因为冒泡机制，当用户点击图中目标元素div时，5,6,7事件区的元素都会响应点击事件（如果具备响应事件能力的话）
vue中阻止@click事件冒泡
xiao白的博客
05-27 2万+
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=240, user-scalable=no, initial-scale=1.0, minimum-scale=1.0, max...
vue绑定的点击事件阻止冒泡的实例
08-28
vue绑定的点击事件阻止冒泡的实例 在本篇文章中，我们将探讨如何在 Vue 中绑定点击事件，并阻止事件冒泡。事件冒泡是一种常见的事件机制，在 DOM 事件流中，事件会从最特定的事件目标到最不特定的事件目标...
解决VUE框架 导致绑定事件的阻止冒泡失效问题
08-27
Vue框架中绑定事件的阻止冒泡失效问题解决方案 在Vue框架中，绑定事件的阻止冒泡失效问题是一个常见的问题。当我们使用Vue框架时，因为框架内部对DOM的处理，导致绑定事件的阻止冒泡失效。下面我们将探讨这个问题的...
重新认识vue之事件阻止冒泡的实现
10-18
当用户点击某个具体项目时，如果不进行阻止冒泡，那么不仅该项目的点击事件会被触发，其所有上级元素（包括整个列表）的点击事件也会被触发。这通常不是我们期望的行为。 解决这个问题的一种通用方法是使用...
vuejs-阻止事件冒泡与默认行为
热门推荐
Lewis_1993的博客
05-18 3万+
阻止事件冒泡与默认行为
vue 点击事件阻止冒泡 用stop
weixin_30344131的博客
11-30 2101
1.使用vue阻止子级元素的click事件冒泡，很简单，用stop。eg: @click.stop='xxx' 转载于:https://www.cnblogs.com/Neilisme/p/10043362.html
vue阻止事件冒泡
肖肖肖丽珠的博客
03-13 3917
<div id="myApp" @click="show2()"> <div @click="show1()"> <button @click.stop="show">vue点我</button> </div> </div> 就是在事件上加上stop就可以...
vue事件对象、冒泡、阻止默认行为
小牛牛的博客
02-15 2万+
事件对象<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <script src="../js/Vue.js" charset="utf-8"></script> <script type="text/javascript"> window.onload = fun
在vue中阻止click事件冒泡，防止触发冒泡另一个事件
哈哈hyc的博客
07-01 3305
使用vue阻止子级元素的click事件冒泡，很简单，用stop <div @click="test1()"> <span @click.stop="test2()">按钮1</span> <span>按钮2</span> </div> 这样点击div里面的按钮1，就不会触发div绑定时间test1()方法 ...
Vue中阻止时间冒泡方法
麻球科技
09-29 1787
为了解决这个问题，Vue.js 为 v-on 提供两个 事件修饰符：.prevent 与 .stop。你是否还记得修饰符是点号打头的指令后缀？ a v-on:click.stop="doThis">a> form v-on:submit.prevent="onSubmit">form> a v-on:click.stop.prevent="doThat"> form
10--click事件，阻止事件冒泡
xu_ze_qin的博客
05-06 811
1、click事件methods方法控制台输出 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script src="https://cdn.jsdelivr.net/npm/vue@2.6.11"></script> <title>cli...
vue3 element-plus el-button 阻止冒泡
04-01
在el-button上添加`@click.stop`即可阻止冒泡。 例如： ```html <el-button @click.stop="handleClick">点击我</el-button> ``` 在这个例子中，`handleClick`方法将只会在`el-button`被点击时触发，而不会向上...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

@逆风boy

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值