vue中阻止冒泡事件

最新推荐文章于 2024-08-15 19:36:37 发布

我是坤、

最新推荐文章于 2024-08-15 19:36:37 发布

阅读量5.3k

点赞数 1

文章标签： vue.js javascript ecmascript

本文链接：https://blog.csdn.net/m0_63650922/article/details/126316236

版权

vue冒泡事件
事件冒泡是指发生在子元素身上的事件，会冒泡至父元素身上。如我们在子元素身上点击后，也会触发父元素的点击事件，若不及时阻止，该事件还会一级一级冒上去。事件冒泡这个行为是默认存在的，故需要我们进行及时的阻止

<div id="app">
<div @click="had2()">
<button @click="had1()">按钮</button>
</div>
</div>
<script>
let vm = new Vue({
el:'#app',
data:{
},
methods:{
had1:function(){
alert('had1');
},
had2:function(){
alert('had2');
}
}
});
</script>

事件冒泡的示例代码如上所示，当用户点击按钮时，会先触发had1事件，输出：had1，然后点击事件冒泡至其父元素身上，触发父元素的点击事件，触发had2事件，再输出：had2。

阻止冒泡行为有两种方式
第一种 js阻止默认行为冒泡
event.stopPropagation();

<html>
<body>
<div id="app">
<div>{{num}}</div>
<div v-on:click="handle0">
<button v-on:click="handle1">点击1</button>
</div>
</div>
<script src="vue.js"></script>
<script>
new Vue({
el: '#app',
data: {
num:0
},
methods:{
handle0:function(){
this.num++;
},
handle1:function(event){
//阻止冒泡
event.stopPropagation();
},
}
});
</script>
</body>
</html>