【vue3入门】-【10】事件修饰符

事件修饰符

在处理事件时调用event.preventDefault()或event.stopPropagation()是很常见的。尽管我们可以直接在方法内调用，但如果方法能更专注于数据逻辑而不用去处理DOM事件的细节会更好。

为解决这一问题，Vue为V-on提供了事件修饰符，常用有以下几个：

1. .stop

2. .prevent

3. .once

4. .enter

5. ...

具体参考：

地址：https://cn.vuejs.org/guide/essentials/event-handling.html#event-modifiers

• 阻止默认事件

<template>
    <h3>事件修饰符-阻止默认事件</h3>
    <a @click="clickHandler" href="http://www.baidu.com">百度一下，你就知道</a>
    <br>
    <a @click.prevent="clickHandler" href="http://www.baidu.com">百度一下，你就知道</a>

</template>
<script>
export default {
    data() {
        return {

        }
    },
    methods: {
        clickHandler(e){
            // 通过event事件阻止默认事件的发生
            // e.preventDefault(); // 也可以不在方法里面写阻止默认事件，直接在标签属性中添加.prevent
            console.log("点击了")

        }
    }
}
</script>

• 阻止事件冒泡

<template>
    <h3>事件修饰符-阻止默认事件</h3>
    <a @click="clickHandler" href="http://www.baidu.com">百度一下，你就知道</a>
    <br>
    <a @click.prevent="clickHandler" href="http://www.baidu.com">百度一下，你就知道</a>
    
    <div @click="clickDiv">
        <p @click.stop="clickp">测试冒泡</p>

    </div>
</template>
<script>
export default {
    data() {
        return {

        }
    },
    methods: {
        clickHandler(e){
            // 通过event事件阻止默认事件的发生
            // e.preventDefault(); // 也可以不在方法里面写阻止默认事件，直接在标签属性中写.prevent
            console.log("点击了")
        },
        clickDiv(e){
            console.log("点击了Div标签");
        },
        clickp(e){
            // 也可以直接在标签中直接写.stop，作用是一样的
            // e.stopPropagation();  // 不设置时，点击“测试冒泡”后会同时作用到父级标签，设置后，仅作用到本级标签
            console.log("点击了p标签");
        }
    }
}
</script>

以上内容出自
【【2023最新版】Vue3从入门到精通，零基础小白也能听得懂，写得出，web前端快速入门教程】 https://www.bilibili.com/video/BV1Rs4y127j8/?share_source=copy_web&vd_source=94c3d5330a46438059359e8dd2494fe9