Vue2.js学习笔记-03(事件修饰符)_内部div触发外部click-CSDN博客

本文链接：https://blog.csdn.net/u012430402/article/details/92795697

一、回顾

在上次的学习过程中，学到了一些vue指令的基本用法，其中v-on指令可以进行事件的绑定，针对这个指令，还有其他的一些修饰符，这是我今天的学习内容。

二、事件修饰符

常用的事件修饰符主要有：

.stop         阻止事件冒泡
.prevent      阻止默认事件
.self         事件作用于元素自身时触发
.once         事件只触发一次
.capture      让事件以捕获的机制触发

实例代码如下：

<body>
    <div id = "app">

       <div  @click="outerClick" style="height: 200px; width: 200px; background-color: aqua;">
           我是外部
           <!-- 使用stop修饰符阻止事件冒泡，如果不使用stop修饰符，当点击内部div时，会触发外部div的点击事件 -->
           <div  @click.stop="innerClick" style="height: 100px; width: 100px; background-color: blue;">我是内部</div>
       </div>

       <br>
       <!-- 使用prevnt修饰符阻止a标签的默认跳转事件 -->
       <a href="https://wwww.baidu.com" @click.prevent>点我去百度</a><br><br>

    
       <!-- 使用self修饰符，只有当事件在该元素本身才触发，点击子元素不会被触发 -->
       <div  @click.self="outerClick" style="height: 200px; width: 200px; background-color: aqua;">
            我是外部
            <div  style="height: 100px; width: 100px; background-color: blue;">我是内部</div>
        </div>

       <!-- 使用once修饰符,事件只触发一次 -->
       <div  @click.once="click" style="height: 100px; width: 100px; background-color: blue;">我是一个div</div>


       <!-- 使用capture修饰符，实现捕获触发事件的机制，如果不使用的话，当我们点击内部div时，先出发内部的点击事件，使用后，先触发外部的点击事件-->
       <div  @click.capture="outerClick" style="height: 200px; width: 200px; background-color: aqua;">
            我是外部
            <!-- 使用stop修饰符阻止事件冒泡，如果不适用stop修饰符，当点击内部div时，会触发外部div的点击事件 -->
            <div  @click ="innerClick" style="height: 100px; width: 100px; background-color: blue;">我是内部</div>
        </div>

    </div>
 
    <script src="../js/vue.2.6.10.js"></script>
    <script>
        var vm = new Vue({
            el: "#app",
            data: {
                msg: ""
            },
            methods: {
                outerClick(){
                    alert("外部被点击了！");
                },
                innerClick(){
                    alert("内部被点击了！");
                },
                click(){
                    alert("被点击了！");
                }
            },
        })
    </script>
</body>