一、阻止事件冒泡：

<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 即可

---------------------
作者：Lewis_1993
來源：CSDN
原文：https://blog.csdn.net/Levis_1993/article/details/72485224

總結

以上是生活随笔為你收集整理的vuejs-阻止事件冒泡与默认行为的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。