06 事件修饰符 | 易学教程

事件修饰符

.stop：阻止冒泡
.prevent：阻止默认事件
.capture：添加事件监听器使用事件捕获模式
.self：只当事件在该元素本身时回调
.once：事件仅触发一次

从一个例子出发：

<html>

<head>
    <meta charset="utf-8">
    </meta>
    <title>事件修饰符</title>
    <!-- 导入vue -->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <style>
        .inner {
            height: 150px;
            background-color: aqua;
        }
    </style>
</head>

<body>
    <div id="app">
        <!-- 点击按钮则会出现冒泡事件机制，先触发btnhandler事件，再触发divhandler事件 -->
        <div class="inner" @click="divhandler"><input type="button" value="戳他" @click="btnhandler"></div>
    </div>
    <script>
        // 在vm实例中，如果想要获取data上的数据，或者想要调用methods中的方法，必须通过this.数据属性名或this.方法名来进行访问
        var vm = new Vue({
            el: "#app",
            data: {
                msg: "爱梦梦",
            },
            methods: {
                divhandler() {
                    console.log("inner div点击事件...");
                },
                btnhandler() {
                    console.log("按钮点击事件")
                }
            }
        })
    </script>
</body>

</html>

点击按钮之后，则会出现默认的冒泡事件触发机制，先触发btnhandler事件，再触发divhandler事件。

1 阻止冒泡行为

<div class="inner" @click="divhandler"><input type="button" value="戳他" @click.stop="btnhandler"></div>

添加.stop修饰符即可。

2 阻止默认行为

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

这样只会触发linkClick事件，不会跳转。

3 捕获模式触发事件

<div class="inner" @click.capture="divhandler"><input type="button" value="戳他" @click="btnhandler"></div>

与冒泡模式相反，这样会先触发divhandler事件，再触发btnhandler事件。

4 只当事件在该元素本身时回调

<div class="inner" @click.self="divhandler">
    <input type="button" value="戳他" @click="btnhandler">
</div>

此时点击按钮仅触发btnhandler事件，点击div才触发divhandler事件。

5 事件仅被触发一次

<div class="inner" @click.once="divhandler">
    <input type="button" value="戳他" @click="btnhandler">
</div>

divhandler事件仅被触发一次。

再如：

<a href="http://www.baidu.com" @click.once.prevent="divhandler">百度一下</a>

第一次会触发divhandler事件，但不会跳转，第二次不会触发divhandler事件，会跳转。

来源：CSDN

作者：来一杯甜梦去冰全糖

链接：https://blog.csdn.net/qq_40996400/article/details/104143513

标签

按钮