Vue中 @click.stop/.self/.prevent 的绑定监听

布满荆棘的人生 2023-02-21 04:47 6阅读 0赞

@click.stop 阻止事件冒泡  
@click.self 阻止自己的冒泡行为，不能阻止人家的冒泡行为  
@click.prevent 阻止事件的默认行为

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
    </head>
    <body>
        
        <style>
            .inner{ 
                height: 150px;
                background-color: darkcyan;
            }
        </style>
        <div id="map1">
            
            
            <div class="inner" @click.self="divHeader"> 
                <input type="button" value="戳他" @click.stop="btnHeader"> 
                <a href="https://www.baidu.com" @click.prevent='link'>百度一下您就知道</a> 
            </div>    
        </div>
        <script src="../js/vue-2.4.0 .js"></script>
        <script>
            var fn1 = new Vue({ 
                el: "#map1",
                data: { },
                methods: { 
                    divHeader(){ 
                        console.log("ok")
                    }, 
                    btnHeader(){ 
                        console.log("ok2")
                    },
                    link(){ 
                        console.log("baidu")
                    }
                }
            })
        </script>
    </body>
    </html>

![20200628153330250.png_pic_center][]如果没有阻止事件，那点击“戳他”，将会触发两个事件，OK和OK2

[20200628153330250.png_pic_center]: https://img-blog.csdnimg.cn/20200628153330250.png#pic_center