v-on事件修饰符

最新推荐文章于 2024-04-18 23:45:00 发布

别追我我有止咳糖浆

最新推荐文章于 2024-04-18 23:45:00 发布

阅读量257

点赞数 5

分类专栏： VUE 文章标签：前端 javascript 开发语言

本文链接：https://blog.csdn.net/qq_43004728/article/details/137920673

版权

VUE 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

本文详细介绍了Vue.js中v-on事件修饰符的功能，如.stop阻止冒泡，.prevent阻止默认行为，以及.capture、.self、.once等的用法，并通过实例展示了如何在实际开发中应用这些修饰符。

摘要由CSDN通过智能技术生成

v-on事件修饰符

常见的v-on修饰符

v-on 提供了很多事件修饰符来辅助实现一些功能。事件修饰符有如下：

.stop 阻止冒泡。本质是调用 event.stopPropagation()。
.prevent 阻止默认事件（默认行为）。本质是调用 event.preventDefault()。
.capture 添加事件监听器时，使用捕获的方式（也就是说，事件采用捕获的方式，而不是采用冒泡的方式）。
.self 只有当事件在该元素本身（比如不是子元素）触发时，才会触发回调。
.once 事件只触发一次。
.{keyCode | keyAlias} 只当事件是从侦听器绑定的元素本身触发时，才触发回调。
.native 监听组件根元素的原生事件。

PS：一个事件，允许同时使用多个事件修饰符。

写法示范：

<!-- click事件 -->
<button v-on:click="doThis"></button>

<!-- 缩写 -->
<button @click="doThis"></button>

<!-- 内联语句 -->
<button v-on:click="doThat('hello', $event)"></button>

<!-- 阻止冒泡 -->
<button @click.stop="doThis"></button>

<!-- 阻止默认行为 -->
<button @click.prevent="doThis"></button>

<!-- 阻止默认行为，没有表达式 -->
<form @submit.prevent></form>

<!--  串联修饰符 -->
<button @click.stop.prevent="doThis"></button>

`.stop`的举例

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.js"></script>

    <style>
        .father {
            height: 300px;
            width: 300px;
            background: pink;
        }

        .child {
            width: 200px;
            height: 200px;
            background: green;
        }
    </style>

</head>

<body>
    
    <div id="test">
        <div class="father" @click="fatherClick">
            <div class="child" @click="childClick">
            </div>
        </div>
    </div>


    <script>
        var vm = new Vue({
            el: '#test',
            data: {},
            methods: {
                fatherClick: function () {
                    console.log("click father");
                },

                childClick: function () {
                    console.log("click child")
                }
            }
        })
    </script>

</body>

</html>

上方代码中，存在冒泡的现象，父标签中包含了一个子标签。当点击子标签时，父标签也会被触发。打印顺序是：

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

那么问题来了，如果我不想让子标签的点击事件冒泡到父亲，该怎么做呢？办法是：给子标签加一个事件修饰符.stop，阻止冒泡。代码如下：

    <div class="child" @click.stop="childClick">

阻止冒泡后，当点击子标签时，打印结果是：click child

`.prevent`的举例1

比如说，超链接<a>默认有跳转行为，那我可以通过事件修饰符.prevent阻止这种跳转行为。

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.js"></script>

    <style>
        .father {
            height: 300px;
            width: 300px;
            background: pink;
        }

        .child {
            width: 200px;
            height: 200px;
            background: green;
        }
    </style>

</head>

<body>
    
    <div id="test">
        <a v-bind="{href: url}"  @click.prevent="linkClick">Link</a>
    </div>


    <script>
        var vm = new Vue({
            el: '#test',
            data: {
                url: "http://www.baidu.com"
            },
            methods: {
                linkClick: function () {
                    console.log('click link');
                }
            }
           
        })
    </script>

</body>

</html>

上方代码中：