模板网免费下载官网seo排名诊断
一、事件冒泡是什么？
事件冒泡指的是：当某个元素上的事件被触发后，事件会从该元素向其父级、祖先元素一直“冒泡”传递，直到 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()。