128-Vue中的事件修饰符

128-Vue中的事件修饰符

• .stop 阻止事件冒泡(*)

• .prevent 阻止默认事件(*)

• .prevent.stop 阻止默认事件的同时阻止冒泡

• .once 阻止事件重复触发（once与stop不能一起使用，否则再次触发事件，依然会冒泡）(*)

只能触发一次，例如：抢优惠券！

<template>
    <div>
        <div class="big" @click="cb">
            <div class="small" @click="cs">
                <a href="#" @click.stop.prevent="ca">a标签a>
            div>
        div>
        <button @click.once="cc">点我button>
    div>
template>
 
<script>
export default {
    
    methods:{
        cb(){
            console.log("点击大的");
        },
        cs(){
            console.log("点击小的");
        },
        ca(){
            console.log("点击a标签");
        },
        cc(){
            console.log("点击按钮");
        }
    }
 
}
script>
 
<style>
.big{
    width: 300px;
    height: 300px;
    background-color: pink;
}
.small{
    width: 200px;
    height: 200px;
    background-color: skyblue;
}
style>

 效果如下：