Javascript 单击标题中的按钮时，如何防止手风琴切换？

我正在使用bootstrap的accordion类，希望在标题中有一些按钮，可以在不切换accordion的情况下单击这些按钮。以下是HTML示例：

<div class="body">
    <div class="panel panel-default" style="width: 80%">
        <div class="panel-heading" data-toggle="collapse" data-target="#container1" style="cursor: pointer;">
            <h4 class="panel-title" style="display: inline-block;">
               title
            </h4>
        <div style="float: right; width: 130px; text-align: right;"><span style="color: red;">test</span></div>
            <button type="button" class="btn btn-xs btn-primary" style="float: right;" onclick="foo(event);">Button</button>
    </div>
    <div id="container1" class="panel-collapse collapse">
        <div class="panel-body">
            panel content
        </div>
    </div>
    </div>
</div>

---

单击按钮时如何防止手风琴触发？

要停止事件冒泡，请使用：

---

演示：这只是一个提示，供使用按钮（至少在React中）激活引导模态的人使用。您必须在单击模态时停止传播，否则单击模态也会展开/折叠手风琴。

window.foo = function(e) {
    console.log("foo");
    $(".body").append("<br>foo");
    e.preventDefault();
}

window.foo = function(e) {
    e.stopPropagation();
}