vue中阻止冒泡事件
vue中阻止冒泡事件
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>
前往低代码交流专区
更多推荐
1
0- 0
已为社区贡献1条内容
所有评论(0)