v-on事件修饰符

最新推荐文章于 2023-10-11 20:22:56 发布

danaeaaaa

最新推荐文章于 2023-10-11 20:22:56 发布

阅读量201

点赞数

分类专栏： vue

本文链接：https://blog.csdn.net/zoie_shen/article/details/106501562

版权

vue 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

v-on事件修饰符

.stop，.prevent,.capture,.self,.once
冒泡是从子元素到父元素，捕获是从父元素到子元素

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../js/vue.js"></script>
    <style>
        .inner{
            height: 150px;
            background-color: forestgreen;
        }
        .outer{
            padding: 30px;
            background: red;
        }
    </style>
</head>
<body>
    <div id="app">
        <!-- 冒泡是从子元素到父元素，捕获是从父元素到子元素 -->
        <!-- .stop 阻止冒泡 -->
        <!-- <div class="inner" @click="div1Handel">
            <input type="button" value="按钮" @click.stop="btn">
        </div> -->

        <!-- .prevent 阻止默认行为 -->
        <!-- <a href="http://www.baidu.com" @click.prevent="aHandel">点击跳转百度</a> -->

        <!-- .capture 实现捕获触发机制 -->
         <!-- <div class="inner" @click.capture="div1Handel">
            <input type="button" value="按钮" @click="btn">
        </div> -->

        <!-- .self 只有点击当前元素的时候，才会触发事件处理函数 -->
        <!-- <div class="inner" @click.self="div1Handel">
            <input type="button" value="按钮" @click="btn">
        </div> -->

        <!-- .once只能触发一次事件处理函数 -->
        <!-- <input type="button" value="按钮" @click.once="btn"> -->


        <!-- self和once的区别 -->
        <!-- self只会阻止自己身上的冒泡行为的触发，并不会真正阻击冒泡的行为 -->

        <!-- <div class="outer" @click="div2Handel">
            <div class="inner" @click="div1Handel">
                <input type="button" value="按钮" @click.once="btn">
            </div>
        </div> -->

        
        <div class="outer" @click="div2Handel">
            <div class="inner" @click.self="div1Handel">
                <input type="button" value="按钮" @click="btn">
            </div>
        </div>
    </div>
    <script>
        var vm = new Vue({
            el:"#app",
            data:{

            },
            methods:{
                div1Handel () {
                    console.log("这是  inner  div   的打印数据")
                },
                btn () {
                    console.log("这是 按钮的 打印数据")
                },
                aHandel () {
                    console.log("点击跳转链接")
                },
                div2Handel () {
                    console.log("这是  outer  div的打印数据")
                }
            }
        })
    </script>
</body>
</html>