vuejs-阻止事件冒泡與預設行為
阿新 • • 發佈:2018-12-04
一、阻止事件冒泡:
<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