vue事件修饰符：@click.capture捕获内层事件，从而改变默认的冒泡执行顺序

骑猪看日落 2023-10-01 09:33 15阅读 0赞

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
        <style>
            .outer{
          
                width: 180px;
                height: 180px;
                background:gold;
                margin: 100px auto;
                padding: 30px;
                border-radius: 50%;
            }
            .outer .center{
          
                width: 130px;
                height: 130px;
                padding: 30px;
                background:pink;
                border-radius: 50%;
            }
            .outer .center .inner{
          
                width: 130px;
                height: 130px;
                background:cyan;
                border-radius: 50%;
            }
        </style>
    </head>
    <body>
        <div id="app">
            
            <div class="outer" @click.capture="outer">
                <div class="center" @click.capture="center">
                    <div class="inner" @click="inner"></div>
                </div>
            </div>
        </div>
        <script src="js/vue.js"></script>
        <script>
            var vue = new Vue({
          
                el:"#app",
                methods:{
          
                    outer() {
          
                        console.log("外层")
                    },
                    center() {
          
                        console.log("中间")
                    },
                    inner(event) {
          
                        console.log("内层")
                    }
                }
            })
        </script>
    </body>
    </html>

![在这里插入图片描述][watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA5a2m5Lqu57yW56iL5omL6K6w_size_20_color_FFFFFF_t_70_g_se_x_16]

[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA5a2m5Lqu57yW56iL5omL6K6w_size_20_color_FFFFFF_t_70_g_se_x_16]: https://img-blog.csdnimg.cn/21fb9b3621e14289b596ab9eca9b3e42.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA5a2m5Lqu57yW56iL5omL6K6w,size_20,color_FFFFFF,t_70,g_se,x_16