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 {
         300px;
        height: 300px;
        background-color: #ccc;
    }

    .box {
         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 只能阻止本元素的冒泡

最后

文明浏览,体现个人素质, 不喜勿喷, 谢谢!! ^_^