Vue 事件修饰符

千梦、流羽

已于 2022-08-07 23:14:22 修改

阅读量209

点赞数

分类专栏： Vue 文章标签： vue.js 前端

于 2022-08-07 23:08:57 首次发布

本文链接：https://blog.csdn.net/qq_51133939/article/details/126215808

版权

Vue 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

Vue事件修饰符

stop

作用：用来阻止事件冒泡。

事件冒泡：当父子元素重合时，点击子元素导致父元素也触发点击事件，就是事件冒泡。
下图中，蓝色div为子元素，红色div为父元素，父子元素都有click事件：

<div style="width: 200px;height: 200px;background: red;" @click="parent">
	<div style="width: 100px;height: 100px; background: blue;" @click="child"></div>
</div>

在这里插入图片描述
当点击红色父元素时，会触发 parent 函数，当点击蓝色子元素时，会同时触发 parent 和 child 函数，这就是事件冒泡。

为了阻止事件冒泡，需要使用 stop事件修饰符：

<div style="width: 200px;height: 200px;background: red;" @click="parent">
	<div style="width: 100px;height: 100px; background: blue;" @click.stop="child"></div>
</div>

更具体一点，stop 是用来阻止事件继续向外冒泡，即有 stop 修饰的事件，会阻止子元素的点击事件继续向外传递（有 stop 的事件会执行）。

prevent

作用：阻止标签的默认行为。

<a href="https://www.baidu.com" @click="execute">百度</a>

当点击该链接时，会先执行 click 事件，再跳转到百度页面，跳转链接是 a 标签的默认行为。想要实现只触发 click 事件，不进行跳转，可以使用 prevent事件修饰符：

<a href="https://www.baidu.com" @click.prevent="execute">百度</a>

但是，该方法不太常用。可以使用下面方法代替：

<a href="javascript:;" @click="execute"></a>
<a href="javascript:void(0);" @click="execute"></a>

self

作用：只监听自身触发的事件。

<div style="width: 200px;height: 200px;background: red;" @click="parent">
	<div style="width: 100px;height: 100px; background: blue;" @click.self="child">
		<div style="width: 50px;height: 50px;background:yellow" @click="child1"></div>
	</div>
</div>

在这里插入图片描述
当点击黄色区域时，蓝色区域事件有 self 修饰，由于点击了黄色区域，没有直接点击蓝色区域，所以该事件不执行：

当点击蓝色区域时，由于直接点击了蓝色区域，所以该事件执行：

注意：事件修饰符可以连用，且不分先后顺序。

once

作用：使事件只触发一次。
如：

<button @click.once="test">我是按钮，我只触发一次</button>

在这里插入图片描述
通过 .once 修饰，无论点击按钮多少次，都只触发一次 test 函数。

完整代码

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>事件修饰符</title>
</head>

<body>
    <div id="app">
        <h1>{{ msg }}</h1>
        <button @click="test">点我</button>

        <!-- 事件修饰符
            .stop       作用：用来阻止事件冒泡
            .prevent    作用：阻止标签的默认行为
            .self       作用：只监听自身标签触发的事件
            .once       作用：该事件只触发一次

            语法：      @事件名.事件修饰符="事件处理函数" ========> @click.stop="test"
        -->

        <div style="width: 200px;height: 200px;background: red;" @click="parent">
            <div style="width: 100px;height: 100px; background: blue;" @click.stop="child"></div>
        </div>

        <a href="https://www.baidu.com" @click.prevent="execute">百度</a>

        <a href="javascript:;" @click="execute"></a>
        <a href="javascript:void(0);" @click="execute"></a>

        <div style="width: 200px;height: 200px;background: red;" @click="parent">
            <div style="width: 100px;height: 100px; background: blue;" @click.self="child">
                <div style="width: 50px;height: 50px;background:yellow" @click="child1"></div>
            </div>
        </div>

        <button @click.once="test">我是按钮，我只触发一次</button>
    </div>
</body>

</html>
<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script>
    var app = new Vue({
        el: "#app",
        data: {
            msg: "事件修饰符"
        },
        methods: {
            test: function () {
                console.log("test");
            },
            parent: function () {
                console.log("parent");
            },
            child: function () {
                console.log("child");
            },
            child1: function () {
                console.log("child1");
            },
            execute: function () {
                console.log("execute");
            }
        },
        computed: {} // 计算属性：用来在vue实例中定义一系列计算属性。
        // 语法：{{ 属性名 }}
        // 注意：既然是计算属性，就是一种属性，出现在网页的多个地方时，只计算一次。
    })
</script>