Bootstrap Accordion头部嵌套按钮点击触发父级折叠冲突如何解决

你遇到的问题本质是DOM事件冒泡机制导致的：点击嵌套在头部内的按钮时，点击事件会从内到外逐层触发父元素绑定的点击事件，所以同时触发了编辑/删除逻辑和外层的折叠逻辑。Vue提供了非常简便的方案处理这类问题：

方案1：使用.stop事件修饰符（推荐） #

直接在内部功能按钮的点击事件绑定上添加.stop修饰符，即可一键阻止事件向上冒泡，不会触发父级头部的折叠事件，无需额外写逻辑代码：

<!-- 外层Accordion头部，绑定折叠事件 -->
<div class="accordion-header" @click="toggleCurrentCollapse">
  <span>{{ item.title }}</span>
  <!-- 内部功能按钮加.stop修饰符 -->
  <button @click.stop="deleteCurrentItem(item.id)">删除</button>
  <button @click.stop="openEditModal(item)">编辑</button>
</div>

.stop是Vue封装的原生event.stopPropagation()语法糖，性能和手动调用完全一致，写法更简洁。

方案2：手动在回调中阻止冒泡 #

如果你的按钮点击逻辑需要先做其他判断再决定是否阻止冒泡，可以手动接收事件对象调用停止冒泡方法：

<button @click="handleEdit($event, item)">编辑</button>

methods: {
  handleEdit(event, item) {
    // 阻止事件向上冒泡到父级头部
    event.stopPropagation()
    // 执行打开编辑模态框逻辑
    this.editModalVisible = true
    this.currentEditItem = item
  }
}

注意要点 #

• 不需要加.prevent修饰符：该修饰符是用来阻止元素默认行为（比如a标签跳转、表单提交），和事件冒泡无关，多余添加不会有作用
• 如果使用第三方UI库的Accordion组件，给内部按钮绑定事件时可以加.native修饰符，即@click.native.stop，确保能捕获原生点击事件阻止冒泡

内容的提问来源于stack exchange，提问作者Alexandre K.