默认冒泡

默认情况下，js的事件会向上冒泡，如：以下三个div元素：

<div class="grandfather" @click="catchGrandfather">
    <div class="father" @click="catchFather">
        <div class="son" @click="catchSon"></div>
    </div>
</div>

当我们点击里层的div，会触发外层的div事件

let vm = new Vue({
    el: "#app",
    data: {
    },
    methods: {
        catchSon() {
            console.log('我还小，别抓我啊...');
        },
        catchFather() {
            console.log('我上有老，下有小，各位官爷，手下留情啊...');
        },
        catchGrandfather() {
            console.log('你们这些兔崽子，敢动我这把老骨头试下!');
        }
    }
})

具体代码

冒泡.gif

事件修饰符

vue提供了事件修饰符，可以修改默认的事件触发机制：

• .stop 阻止冒泡
• .prevent 阻止默认事件
• .capture 添加事件侦听器时使用事件捕获模式
• .self 只当事件在该元素本身（比如不是子元素）触发时触发回调
• .once 事件只触发一次

以 .stop 为例：

<div class="grandfather" @click="catchGrandfather">
    <div class="father" @click="catchFather">
        <!-- 阻止此元素向上冒泡 -->
        <div class="son" @click.stop="catchSon"></div>
    </div>
</div>

阻止冒泡.gif