vue中阻止冒泡事件_vue3阻止点击事件冒泡

作者：我家自动化 | 2024-02-13 02:00:02

踩

vue3阻止点击事件冒泡

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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

事件冒泡的示例代码如上所示，当用户点击按钮时，会先触发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
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28

结果：再次点击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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27