vue教程-事件修饰符-同时阻止默认事件 .prevent和事件冒泡 .stop

提出问题

像下代码中,点击超链接,弹出对话框后,即发生默认事件:刷新页面,又会发生事件冒泡:执行 <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>

原文出处:https://malaoshi.top/show_1IX2cIXbUo6P.html