Vue----事件修饰符详解+代码

最新推荐文章于 2023-03-09 14:44:40 发布

原创最新推荐文章于 2023-03-09 14:44:40 发布 · 310 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #javascript

Vue 同时被 2 个专栏收录

1 篇文章

订阅专栏

JavaScript

1 篇文章

订阅专栏

本文详细介绍了Vue.js中的事件修饰符，包括`.stop`、`.capture`、`.self`和`.once`，并提供了实例代码展示它们如何阻止事件冒泡、改变事件传播顺序、限制事件触发条件及防止事件重复触发。通过这些修饰符，可以更精确地控制Vue应用中的事件处理。

事件修饰符

自定义事件行为，需要配合v-on指令来使用

冒泡

复杂的页面结构需要很多事件来完成交互行为。默认事件的传递方式是从内部到外部

<!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>Document</title>
    <script src="./js/vue.js"></script>
    <style>
        .d1{
            width: 500px;
            height: 500px;
            background-color: blanchedalmond;
        }
        .d2{
            width: 300px;
            height: 300px;
            background-color: burlywood;
        }
        .d3{
            width: 200px;
            height: 200px;

            background-color: cadetblue;
        }
    </style>
</head>
<body>
    <div id="app">
        <div class="d1" v-on:click="doD1">
            <div class="d2" v-on:click="doD2">
                <div class="d3" v-on:click="doD3"></div>
            </div>
        </div>
    </div>
    <script >
        var vm=new Vue({
            el:'#app',
            methods:{
                doParent(){
                    console.log('我是父元素的点击事件')
                },
                doThis(){
                    console.log('我是子元素的点击事件')
                },
                doD1(){
                    console.log("d11111111")
                },
                doD2(){
                    console.log("d22222222222222")
                },
                doD3(){
                    console.log("d3333333333")
                }
            }
        });
        
    </script>
</body>
</html>

代码页面:
在这里插入图片描述
点击d3:

点击d2:
在这里插入图片描述
点击d1:

.stop

阻止冒泡：其实是阻止使用了该事件修饰符的标签再进一步进行冒泡！
切断了冒泡行为

d3使用事件修饰符

代码如下（示例）：

  <div id="app">
        <div class="d1" v-on:click="doD1">
            <div class="d2" v-on:click="doD2">
                <div class="d3" v-on:click.stop="doD3"></div//
                <!-- <div class="d3" v-on:click="doD3"></div> -->
            </div>
        </div>
    </div>

点击d3
在这里插入图片描述
点击d2

d2使用事件修饰符

代码如下（示例）

<div id="app">
        <div class="d1" v-on:click="doD1">
            <div class="d2" v-on:click.stop="doD2">
                <div class="d3" v-on:click="doD3"></div>
                <!-- <div class="d3" v-on:click="doD3"></div> -->
            </div>
        </div>
    </div>

点击d2

点击d3
在这里插入图片描述

.capture

事件捕获：
捕获的顺序：外–》内
事件执行过程：先从外找带有capture进行事件调用，然后进行正常的冒泡

d1使用事件修饰符

代码如下（示例）

  <div id="app">
        <div class="d1" v-on:click.capture="doD1">
            <div class="d2" v-on:click="doD2">
                <div class="d3" v-on:click="doD3"></div>
                <!-- <div class="d3" v-on:click="doD3"></div> -->
            </div>
        </div>
    </div>

点击d3
在这里插入图片描述

d1和d2 使用事件修饰符

代码如下（示例）

  <div id="app">
        <div class="d1" v-on:click.capture="doD1">
            <div class="d2" v-on:click.capture="doD2">
                <div class="d3" v-on:click="doD3"></div>
                <!-- <div class="d3" v-on:click="doD3"></div> -->
            </div>
        </div>
    </div>

点击d3
在这里插入图片描述

点击d2
在这里插入图片描述

.self

自身触发：只有点击带有.self的标签才会执行相应的行为（并且继续冒泡），否则就当他不存再在

在d2使用事件修饰符

代码如下（示例）

 <div id="app">
        <div class="d1" v-on:click="doD1">
            <div class="d2" v-on:click.self="doD2">//在d2使用事件修饰符
                <div class="d3" v-on:click="doD3"></div>
                <!-- <div class="d3" v-on:click="doD3"></div> -->
            </div>
        </div>
    </div>