事件修饰符

事件修饰符

修饰符: 作用用来和事件连用,用来决定事件触发条件或者是阻止事件的触发机制

  常用的事件修饰符
   .stop
   .prevent
   .capture
   .self
   .once
   .passive

stop事件修饰符

用来阻止事件冒泡

<div id="app">
    <div class="aa" @click="divClick">
        <!--用来阻止事件冒泡-->
        <input type="button" value="按钮" @click.stop="btnClick">
    </div>
</div>
<!--引入vue-->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
    const app = new Vue({
        el: "#app",
        data: {},
        methods: {
            btnClick(){
                alert('button被点击了');
            },
            divClick(){
                alert('div被点击了');
            }
        }
    });
</script>

prevent 事件修饰符

用来阻止标签的默认行为

	<!--用来阻止事件的默认行为-->
    <a href="http://www.baizhibest.com/" @click.prevent="aClick">教育</a>

self 事件修饰符

用来针对于当前标签的事件触发 ===========> 只触发自己标签的上特定动作的事件 只关心自己标签上触发的事件 不监听事件冒泡

		<!--只触发标签自身的事件-->
    <div class="aa" @click.self="divClick">
        <!--用来阻止事件冒泡-->
        <input type="button" value="按钮" @click.stop="btnClick">
        <input type="button" value="按钮1" @click="btnClick1">
    </div>

once 事件修饰符

once 一次 作用: 就是让指定事件只触发一次

    <!--
    .prevent : 用来阻止事件的默认行为
    .once    : 用来只执行一次特定的事件
    -->
    <a href="http://www.baizhibest.com/" @click.prevent.once="aClick">教育</a>