vue点击实现冒泡
Vue 中实现点击事件冒泡的方法
在 Vue 中，默认情况下点击事件会自动冒泡。如果需要手动控制或阻止冒泡，可以使用以下方法：
允许事件冒泡
Vue 默认行为允许事件冒泡，无需额外操作：
<template>
<div @click="handleParentClick">
<button @click="handleChildClick">点击我</button>
</div>
</template>
<script>
export default {
methods: {
handleChildClick() {
console.log('子元素点击');
},
handleParentClick() {
console.log('父元素点击');
}
}
}
</script>阻止事件冒泡
使用 .stop 修饰符阻止事件冒泡：
<template>
<div @click="handleParentClick">
<button @click.stop="handleChildClick">点击我</button>
</div>
</template>使用原生事件对象
通过 $event 访问原生事件对象并调用 stopPropagation()：
<template>
<div @click="handleParentClick">
<button @click="handleChildClick($event)">点击我</button>
</div>
</template>
<script>
export default {
methods: {
handleChildClick(event) {
event.stopPropagation();
console.log('子元素点击');
}
}
}
</script>事件捕获阶段处理
使用 .capture 修饰符在捕获阶段处理事件：
<template>
<div @click.capture="handleParentClick">
<button @click="handleChildClick">点击我</button>
</div>
</template>注意事项
- 事件修饰符可以串联使用，如
@click.stop.prevent - 在自定义组件上使用原生事件需要添加
.native修饰符 - 事件冒泡是 DOM 原生行为，Vue 只是提供了更便捷的封装
