在 Vue.js 中，阻止事件冒泡有两种方法：使用 event.stopPropagation() 在事件处理函数中阻止冒泡，或使用 $event.native.stopImmediatePropagation() 立即停止事件冒泡。后者用于阻止事件传播到任何父元素，而前者仅阻止传播到直系祖先元素。
如何使用 Vue 阻止事件冒泡
在 Vue.js 中，阻止事件冒泡有两种主要方法：
方法 1：使用 event.stopPropagation
在事件处理函数中，使用 event.stopPropagation() 方法可以防止该事件进一步向祖先元素传播。
立即学习“前端免费学习笔记（深入）”；
methods: {
handleClick(event) {
event.stopPropagation();
// 此事件将不会冒泡到父元素
}
}方法 2：使用 $event.native.stopImmediatePropagation
$event.native 对象提供了指向原生 DOM 事件对象的引用。使用 stopImmediatePropagation 方法可以在该对象上立即停止事件冒泡。
methods: {
handleClick(event) {
event.$event.native.stopImmediatePropagation();
// 此事件将不会冒泡到任何元素
}
}何时使用 stopImmediatePropagation
当您需要防止事件传播到任何父元素（而不仅仅是直系祖先元素）时，可以使用 stopImmediatePropagation。
示例：
以下示例演示如何使用 stopPropagation 阻止按钮点击事件冒泡到父容器：
