Vue中事件修饰符的使用方式

最新推荐文章于 2024-04-04 11:02:50 发布

Sheldon一蓑烟雨任平生

最新推荐文章于 2024-04-04 11:02:50 发布

阅读量573

点赞数 1

分类专栏： Vue.js 文章标签： vue.js html javascript

本文链接：https://blog.csdn.net/qq_39055970/article/details/106301394

版权

Vue.js 专栏收录该内容

27 篇文章 2 订阅

订阅专栏

vue中的事件修饰符

事件修饰符是什么

vue中的事件修饰符用于控制事件的标签范围和标签的默认事件，比如点击事件的冒泡行为和a标签的href默认点击跳转事件。

不同的事件修饰符

.stop事件修饰符

.stop作用：阻止冒泡
首先，我们需要理解什么是事件冒泡。事件冒泡是指多个标签元素嵌套时，点击（或者其他事件）内部标签，也会触发外部包裹标签的点击事件。比如下面这个例子：

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>vueApp</title>
    <style>
        .out {
            background-color: lightcoral;
            padding: 150px;
        }

        .inner {
            height: 300px;
            background-color: lightblue;
        }
    </style>
</head>

<body>
    <div id="app">
        <div class="out" @click="outHandler">
            <div class="inner" @click="innerHandler">
                <button @click="btnHandler">点我</button>
            </div>
        </div>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        var app = new Vue({
            el: "#app",
            data: {

            },
            methods: {
                btnHandler() {
                    console.log("触发按钮点击事件");
                },
                innerHandler() {
                    console.log("触发内部div点击事件");
                },
                outHandler() {
                    console.log("触发外部div点击事件");
                }
            }
        });
    </script>
</body>

</html>

在这里插入图片描述
但是，当我们对内部标签事件添加.stop事件修饰符时，则会阻止事件向外冒泡。

<button @click.stop="btnHandler">点我</button>

在这里插入图片描述

.prevent事件修饰符

prevent作用：阻止默认事件
比如a标签的点击跳转默认事件和我们定义的点击事件向冲突时，可以使用该事件修饰符进行阻止，使用方式和stop修饰符一致，也是在事件后加上.prevent

<a href="www.baidu.com" @click.prevent="aHandler">有问题，找度娘</a>

在这里插入图片描述

.capture事件修饰符

.capture作用：将冒泡事件中的加.capture修饰符的事件提前到第一个执行。（官方解释：添加时间侦听器时使用事件捕获模式）

    <div class="out" @click="outHandler">
            <div class="inner" @click.capture="innerHandler">
                <button @click="btnHandler">点我</button>
            </div>
        </div>

在这里插入图片描述

.self事件修饰符

只当事件在该元素本身（比如不是子元素）触发时触发回调

<div class="out" @click="outHandler">
     <div class="inner" @click.self="innerHandler">
          <button @click="btnHandler">点我</button>
     </div>
</div>

在这里插入图片描述
可以发现，点击子元素，并不会触发内部div的回调函数

.once事件修饰符

.once作用：事件只能触发一次

<a href="https://www.baidu.com/" @click.prevent.once="aHandler">有问题，找度娘</a>

第一次点击触发aHandler事件，第二次@click点击事件失效，跳转到href的网址。
注意：事件修饰符可以串联使用，也可以单独使用。

Sheldon一蓑烟雨任平生

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
打赏
0
评论
Vue中事件修饰符的使用方式

vue中的事件修饰符事件修饰符是什么不同的事件修饰符.stop事件修饰符.prevent事件修饰符.capture事件修饰符.self事件修饰符.once事件修饰符事件修饰符是什么vue中的事件修饰符用于控制事件的标签范围和标签的默认事件，比如点击事件的冒泡行为和a标签的href默认点击跳转事件。不同的事件修饰符.stop事件修饰符.stop作用：阻止冒泡首先，我们需要理解什么是事件冒泡。事件冒泡是指多个标签元素嵌套时，点击（或者其他事件）内部标签，也会触发外部包裹标签的点击事件。比如下面这个例
复制链接

扫一扫