vue 事件修饰符（stop、 .capture 、.self、.prevent、.once）

最新推荐文章于 2024-04-12 11:01:11 发布

weixin_40624809

最新推荐文章于 2024-04-12 11:01:11 发布

阅读量476

点赞数

CC 4.0 BY-SA版权

分类专栏： vue

本文链接：https://blog.youkuaiyun.com/weixin_40624809/article/details/111953688

vue 专栏收录该内容

15 篇文章

订阅专栏

本文介绍了Vue中五个重要的事件修饰符：stop用于阻止事件冒泡，capture实现事件捕获机制，self确保事件仅在当前元素上触发，prevent阻止默认事件行为，once则让事件只执行一次。了解这些修饰符能帮助开发者更精确地控制事件处理。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

stop：阻止冒泡事件。即：放在谁上，就从谁开始不冒泡（放在被点击的元素上，自身的点击事件会触发）。
capture：捕获触发机制。即：无论点击谁，先触发带有capture的。
self：自身不参与冒泡事件。即：冒泡事件照常进行，带有self的不参与。（放在被点击的元素上，自身的点击事件会触发）。
prevent：阻止默认事件。
once：只触发一次事件。即：阻止默认事件，就阻止一次、div的click事件就只执行一次。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title></title>
    <script src="https://cdn.bootcss.com/vue/2.5.2/vue.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/echarts@5.0.0/dist/echarts.min.js"></script>
    <script src="https://cdn.bootcss.com/vuex/3.0.1/vuex.min.js"></script>
    <style type="text/css">
        .inner {
            height: 150px;
            background-color: #cca4e3;
        }
        .outer {
            padding: 40px;
            background: #c0ebd7;
        }
    </style>
</head>
<body>
    <div id="app">
        <!-- 使用  .stop  阻止冒泡   即：放在谁上就从谁开始停止冒泡          原本顺序：btn>>inner>>outer      -->
        <!--inner.stop  现在：btn>>inner   -->
        <!--btn.stop   现在：btn           -->
        <!-- <div class="outer" @click="div2Handler">
             <div class="inner" @click="div1Handler">   
                <input type="button" value="点击" @click.stop="btnHandler" />   
            </div>
        </div> -->

        <!-- 使用  .provent 阻止默认行为 -->
        <!-- <a href="http://baidu.com" @click.prevent="linkClick">百度一下</a> -->

        <!--使用  .capture  实现捕获触发机制  即：先触发带有该修饰符的。     原本顺序： btn>>inner>>onter   -->
        <!--inner.capture  现在：inner>>btn>>outer    -->
        <!--outer.capture  现在：outer>>btn>>inner    -->
        <!-- <div class="outer" @click.capture="div2Handler">
            <div class="inner" @click="div1Handler">
                <input type="button" value="点击" @click="btnHandler" />
            </div>
        </div> -->

        <!-- 使用  .self  只有点击只有点击当前元素时候，才会触发事件处理函数（阻止自身的冒泡事件）.  原本顺序： btn>>inner>>onter  -->
        <!--inner.self  现在：btn>>outer    -->
        <!--outer.self  现在：btn>>inner    -->
        <!-- <div class="outer" @click.self="div2Handler">
            <div class="inner" @click="div1Handler">
                <input type="button" value="点击" @click="btnHandler" />
            </div>
        </div> -->


        <!-- 使用  .once  只触发一次事件处理函数 -->
        <!-- 即按照下面的例子，第一次低级不跳转，第二次才跳转 -->
        <!-- <a href="http://baidu.com" @click.prevent.once="linkClick">百度一下</a> -->
        <!-- 指触发一次点击事件 -->
        <!-- <div class="inner" @click.once="div1Handler"></div> -->


        <!-- 演示： .stop  和  .self  的区别 -->
        <!-- <div class="outer"  @click="div2Handler">
                <div class="inner" @click="div1Handler">
                    <input type="button" value="点击" @click="btnHandler" />
                </div>
            </div> -->

        <!-- .self只会阻止自己身上的冒泡，并不会真正阻止冒泡    即：点击按钮时，自身不触发点击事件，冒泡事件依旧存在-->
        <!-- <div class="outer" @click="div2Handler">
                <div class="inner" @click.self="div1Handler">
                    <input type="button" value="点击我！！！" @click="btnHandler" />
                </div>
            </div> -->
        <!-- 触发了bt按钮的点击事件
                触发了outer div的点击事件-->


    </div>
    <script type="text/javascript">
        var vm = new Vue({
            el: '#app',
            data: {},
            methods: {
                div1Handler() {
                    console.log('触发了inner div的点击事件');
                },
                div2Handler() {
                    console.log('触发了outer div的点击事件');
                },
                btnHandler() {
                    console.log('触发了bt按钮的点击事件');
                },
                linkClick() {
                    console.log('触发了链接');
                }
            }
        })
    </script>
</body>
</html>