一、事件冒泡是什么？

事件冒泡指的是：當某個元素上的事件被觸發后，事件會從該元素向其父級、祖先元素一直“冒泡”傳遞，直到 document。這意味著，如果父元素綁定了點擊事件，子元素觸發點擊時也可能順帶觸發父元素的點擊邏輯。

<template><div class="card" @click="handleCardClick"><button @click="handleButtonClick">解除綁定</button></div>
</template>

點擊按鈕時，handleButtonClick 會執行，但由于事件冒泡，handleCardClick 也會被觸發。

這就是我們常說的 點擊“穿透” 問題。

二、如何阻止事件冒泡？?

只需要加上 .stop，就能阻止事件向上傳播：

<button @click.stop="handleButtonClick">解除綁定</button>

三、原生寫法對比

如果你是用原生 JavaScript 監聽事件，那就需要顯式調用 stopPropagation()：

button.addEventListener('click', function(event) {event.stopPropagation(); // 阻止冒泡
});

四、總結

• Vue 中事件“穿透”問題，本質是事件冒泡。

• 使用 .stop 可以優雅地阻止冒泡。

• 原生寫法則用 event.stopPropagation()。