避免事件“穿透”——Vue 中事件冒泡的理解与解决方案

一、事件冒泡是什么？

事件冒泡指的是：当某个元素上的事件被触发后，事件会从该元素向其父级、祖先元素一直“冒泡”传递，直到 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()。