vuejs-阻止事件冒泡与默认行为

最新推荐文章于 2025-07-04 16:59:10 发布

Lewis_1993

最新推荐文章于 2025-07-04 16:59:10 发布

阅读量3.2w

点赞数 1

CC 4.0 BY-SA版权

分类专栏： Vue

本文链接：https://blog.youkuaiyun.com/Levis_1993/article/details/72485224

Vue 专栏收录该内容

3 篇文章

订阅专栏

本文介绍了Vue.js中如何使用事件修饰符来阻止事件冒泡和默认行为。通过两个实例展示了@click.stop和@contextmenu.prevent的应用场景，帮助开发者更好地控制DOM事件。

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

阻止事件冒泡

<div id="box">
    <div @click="show2()">
        <input type="button" value="按钮" @click="show()">
    </div>
</div>

new Vue({
    el: "#box",
    data: {},
    methods: {
        show: function() {
            alert(1); 
        },
        show2: function() {
            alert(2); 
        }
    }
});

在上面的代码中，input元素绑定了一个click事件，点击它将调用show()方法

同时其父节点也绑定了一个click事件，点击它将调用show2()方法

此时如果点击input按钮，将引发事件冒泡，show()和show2()方法会被依次调用

若要阻止事件冒泡，只需将input标签中的@click 改成@click.stop 即可

阻止默认行为

<div id="box">
    <input type="button" value="按钮" @contextmenu="show()">
</div>

new Vue({
    el: "#box",
    data: {},
    methods: {
        show: function() {
            alert(1); 
        }
    }
});

在上面的代码中，input元素绑定了一个contextmenu事件，单击鼠标右键会触发该事件，并调用show()方法

此时浏览器窗口不仅会出现alert弹框，还会出现浏览器默认的菜单选项

若要阻止默认行为，只需将@contextmenu 改成@contextmenu.prevent 即可