vue 事件修飾符

liaohui5發表於2019-03-03
Vue事件

常用事件修飾符

  • .stop 阻止冒泡
<template>
    <div class="app">
        <div class="bigBox" @click="testClick('bigBox')">
            <div class="box" @click="testClick('box')">
                <button class="btn" @click="testClick('btn')">click</button>
                <button class="btn" @click.stop="testClick('btn')">click</button>
            </div>
        </div>
    </div>
</template>

<script>
    export default {
        name: 'App',
        methods: {
            testClick (className) {
                console.log(className);
            }
        }
    }
</script>

<style>
    .bigBox {
        width: 300px;
        height: 300px;
        background-color: #ccc;
    }

    .box {
        width: 150px;
        height: 150px;
        background-color: #f00;
    }
</style>

複製程式碼
  • .prevent 阻止預設行為 (比如點選a標籤跳轉頁面)
<template>
    <div class="app">
        <p> <a href="https://www.qq.com" @click="testPrevent">沒有阻止預設行為</a> </p>
        <p> <a href="https://www.qq.com" @click.prevent="testPrevent">阻止了預設行為</a> </p>
    </div>
</template>

<script>
    export default {
        name: 'App',
        methods: {
            testPrevent() {
                console.log("預設行為被阻止了");
            }
        }
    }
</script>
複製程式碼
  • .once 只繫結一次
<template>
    <div class="app">
        <p><button @click="testBind">普通繫結</button></p>
        <p><button @click.once="testBind">只繫結一次</button></p>
    </div>
</template>

<script>
    export default {
        name: 'App',
        methods: {
            testBind() {
                alert("再點一次試試, 看還有沒有");
            }
        }
    }
</script>
複製程式碼

瞭解

  • .capture 監聽事件時, 使用事件捕獲模式(從外到內)

  • .self 繫結該事件的元素本身才能觸發事件(本元素的子元素不能觸發)

  • .stop 和 .self 的區別: .stop能夠完全阻止冒泡, 而 .self 只能阻止本元素的冒泡

最後

文明瀏覽,體現個人素質, 不喜勿噴, 謝謝!! ^_^

相關文章