一、JS阻止冒泡
我們首先來看一下JS中如何阻止事件冒泡。在JS中我們可以使用Event對象的stopPropagation方法，來阻止事件向父級元素傳遞，代碼如下：
document.getElementById('child').addEventListener('click', function(event){
event.stopPropagation();
console.log('我點擊了子元素！');
});
document.getElementById('parent').addEventListener('click', function(){
console.log('我點擊了父元素！');
});
運行結果：當我們在子元素上點擊時，只有子元素的事件被觸發，父元素的事件不會被觸發。
二、JQ阻止冒泡和默認事件
JQ庫為我們提供了一個方便的事件處理函數：e.stopPropagation()和e.preventDefault()。其中e.stopPropagation()功能和JS中stopPropagation()一樣，用於阻止事件冒泡。而e.preventDefault()則用來阻止事件的默認行為，例如阻止a標籤的跳轉。代碼如下：
$('#child').click(function(e){
e.stopPropagation();
console.log('我點擊了子元素！');
});
$('#parent').click(function(e){
console.log('我點擊了父元素！');
});
$('a').click(function(e){
e.preventDefault();
})
運行結果：當我們在子元素上點擊時，只有子元素的事件被觸發，父元素的事件不會被觸發；當我們點擊a標籤時，不會跳轉到鏈接的地址。
三、Vue阻止冒泡事件
在Vue中，我們可以使用v-on的修飾符.stop阻止事件向上傳播，代碼如下：
原創文章，作者：XKNSI，如若轉載，請註明出處：https://www.506064.com/zh-hant/n/329515.html
微信掃一掃 
支付寶掃一掃 