Vue @/v-on事件修饰符

最新推荐文章于 2022-04-12 11:03:39 发布

ZH_TX

最新推荐文章于 2022-04-12 11:03:39 发布

阅读量334

点赞数

分类专栏： JavaScript Vue

本文链接：https://blog.csdn.net/ZHXT__/article/details/103184813

版权

JavaScript 同时被 2 个专栏收录

71 篇文章 0 订阅

订阅专栏

Vue

61 篇文章 3 订阅

订阅专栏

https://www.cnblogs.com/tianshug/p/11813331.html

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="vue2.5.16.js"></script>
    <style>
        .father {
            height: 300px;
            width: 300px;
            background: pink;
        }

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

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

        var vm = new Vue({
            el: '#app',
            data: {},
            methods: {
                fatherClick: function () {
                    console.log('father 被点击了');
                },
                childClick: function () {
                    console.log('child 被点击了');
                }
            }
        })

    </script>
</body>

</html>

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

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

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

<div class="father" @click.self="fatherClick">

疑问：既然.stop和.self都可以阻止冒泡，那二者有什么区别呢？

区别在于：前者能够阻止整个冒泡行为，而后者只能阻止自己身上的冒泡行为

。使用修饰符时，顺序很重要；相应的代码会以同样的顺序产生。因此，用 v-on:click.prevent.self 会阻止所有的点击，而 v-on:click.self.prevent 只会阻止对元素自身的点击。

ZH_TX

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Vue @/v-on事件修饰符

https://www.cnblogs.com/tianshug/p/11813331.html
复制链接

扫一扫

专栏目录

Vue @/v-on事件修饰符

“相关推荐”对你有帮助么？