04-事件修饰符

最新推荐文章于 2025-08-29 11:53:59 发布

原创最新推荐文章于 2025-08-29 11:53:59 发布 · 112 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue

vue 专栏收录该内容

4 篇文章

订阅专栏

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>

    <style>
        #app{
            width: 80%;
            margin: 0px auto;
        }
        .inner{
            height: 200px;
            width: 100%;
            background-color: lightgreen;
        }
    </style>
</head>

<body>
    <div id="app">


        <!-- 注：.stop 与 .self 的区别
                .stop 会阻止所有的冒泡行为
                .self 只会阻止自己冒泡 不会干预其他标签的冒泡行为
        -->
        <!-- 通过使用 .stop 阻止冒泡 即是说点击按钮不会触发div的点击事件 在子标签中使用 -->
        <div class="inner" @click="divClick">
            <input type="button" value=".stop" @click.stop="btnClick">
        </div>

        <!-- 使用 .prevent 阻止默认行为 例如a标签的链接跳转、表单的submit事件等 -->
        <a href="https://www.baidu.com" @click.prevent="linkClick">.prevent前往百度</a>

        <!-- 使用 .capture 实现捕获触发事件的机制 即当点击按钮时 先执行外面的div点击事件 再执行里面的btn点击事件  在父标签中使用 -->
        <div class="inner" @click.capture="divClick">
            <input type="button" value=".capture" @click.stop="btnClick">
        </div>


        <!-- 使用 .self 实现只有点击档期元素时，才会触发事件的点击事件 在父标签中使用 -->
        <div class="inner" @click.self="divClick">
            <input type="button" value=".self" @click.stop="btnClick">
        </div>

        <!-- 使用 .once 只触发一次事件处理函数  -->
        <a href="https://www.baidu.com" @click.prevent.once="linkClick">前往百度</a>

    </div>
</body>
    <script src="lib/vue.min.js"></script>
    <script>
        var vm=new Vue({
           el:'#app',
           data:{},
           methods:{
               divClick(){
                    console.log("InnerDiv的点击事件");
               },
               btnClick(){
                   console.log("btn的点击事件");
               },
               linkClick(){
                   console.log("触发了链接的点击事件");
               }
           }
        });
    </script>

</html>