vue中阻止冒泡事件

最新推荐文章于 2024-05-13 08:44:21 发布

向前有光

最新推荐文章于 2024-05-13 08:44:21 发布

阅读量1.7w

点赞数 10

分类专栏： Vue 文章标签： vue.js

本文链接：https://blog.csdn.net/qq_40666120/article/details/106071521

版权

Vue 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

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>

结果：再次点击button按钮，然后就没有事件被触发，解决了上一级div的冒泡事件
在这里插入图片描述

第二种修饰符阻止默认行为冒泡

v-on:click.stop

<html>
    <body>
        <div id="app">
            <div>{{num}}</div>
            <div v-on:click="handle0">
                <button v-on:click.stop="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){
                       
                    },
                }
            });
        </script>
    </body>
</html>

结果：再次点击button按钮，然后就没有事件被触发，解决了上一级div的冒泡事件
在这里插入图片描述

向前有光

关注

10
点赞
踩
16

收藏

觉得还不错? 一键收藏
0
评论
vue中阻止冒泡事件

vue冒泡事件事件冒泡是指发生在子元素身上的事件，会冒泡至父元素身上。如我们在子元素身上点击后，也会触发父元素的点击事件，若不及时阻止，该事件还会一级一级冒上去。事件冒泡这个行为是默认存在的，故需要我们进行及时的阻止<script> window.onload = function(){ var vm = new Vue({ el:'#app', data:{ }, met
复制链接

扫一扫