事件修饰符

最新推荐文章于 2024-04-04 11:02:50 发布

XuuuT

最新推荐文章于 2024-04-04 11:02:50 发布

阅读量78

点赞数

分类专栏： Vue

本文链接：https://blog.csdn.net/Socraton/article/details/103678935

版权

Vue 专栏收录该内容

13 篇文章 0 订阅

订阅专栏

<style>
        .inner{
            height: 150px;
            background-color: red;
        }
        .outer{
            padding: 40px;
            background-color: green;
        }
    </style>
</head>
<body>
    <div id="app">
        <!--使用.stop阻止冒泡-->
        <!--<div class="inner" @click="InnerHandler">
            <input type="button" value="点击" @click.stop="btnHandler">
        </div>-->

        <!--使用 .prevent 阻止默认行为-->
        <!--<a href="http://www.baidu.com" @click.prevent="linkHandler">跳转链接</a>-->

        <!--使用 .capture 实现捕获触发事件的机制  从外到里-->
        <!--<div class="inner" @click.capture="InnerHandler">
            <input type="button" value="点击" @click="btnHandler">
        </div>-->

        <!--使用 .self 只有点击当前元素才会触发事件处理函数-->
        <!--<div class="inner" @click.self="InnerHandler">
            <input type="button" value="点击" @click="btnHandler">
        </div>-->

        <!--使用 .once 只触发一次事件处理函数-->
        <!--<a href="http://www.baidu.com" @click.prevent.once="linkHandler">跳转链接</a>-->


        <!--.self 只会阻止 自己身上 冒泡行为的触发，并不会真正阻止冒泡行为-->
        <!--<div class="outer" @click="OuterHandler">
            <div class="inner" @click="InnerHandler">
                <input type="button" value="点击" @click.stop="btnHandler">
            </div>
        </div>-->
        <!--<div class="outer" @click="OuterHandler">
            <div class="inner" @click.self="InnerHandler">
                <input type="button" value="点击" @click="btnHandler">
            </div>
        </div>-->
    </div>

    <script>
        var vm = new Vue({
            el:'#app',
            data:{

             },
            methods: {
                InnerHandler(){
                    console.log('触发了inner')
                },
                btnHandler(){
                    console.log('触发了btn')
                },
                linkHandler(){
                    console.log('触发了跳转')
                },
                OuterHandler(){
                    console.log('触发了outer')
                }
            }
        })
    </script>