提出问题

像下代码中，点击超链接，弹出对话框后，即发生默认事件：刷新页面，又会发生事件冒泡：执行 <div> 的事件

实际上：我们 既想 阻止默认事件、又想 阻止事件冒泡

<div id="app" @click="show2">
    <a href="" v-on:click="show" >阻止默认行为、阻止事件冒泡</a>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.12"></script>
<script>
var vm = new Vue({
    el: '#app',
    methods:{ // 在 methods 对象中定义方法
        show:function(event){//第一个参数是事件对象
            alert("hello")
            console.log("hello")
        },
        show2:function(){
            alert("div事件")
        }
    }
})
</script>

解决

事件修饰符可以 连着写：

• .prevent.stop ：先 阻止默认事件、后 阻止事件冒泡

• .stop.prevent ：先 阻止事件冒泡、后 阻止默认事件

例子

<div id="app" @click="show2">
    <a href="" v-on:click.prevent.stop="show" >阻止默认行为、阻止事件冒泡</a>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.12"></script>
<script>
var vm = new Vue({
    el: '#app',
    methods:{ // 在 methods 对象中定义方法
        show:function(event){//第一个参数是事件对象
            alert("hello")
            console.log("hello")
        },
        show2:function(){
            alert("div事件")
        }
    }
})
</script>

原文出处：/show_1IX2cIXbUo6P.html