Twitter bootstrap 3 标题中带有图标的引导面板

我有一个引导可折叠面板，标题中有3个控制图标，我想用来调用外部函数，但是单击面板标题中的任何东西都可以切换折叠功能

是否有办法隔离末端的图标，使其不会触发面板折叠

我正在使用react.js和react boottrap

var header = (
            <span>

                        {this.props.ticker.name}

                    <ButtonGroup bsSize="xsmall">
                        <OverlayTrigger placement="top" overlay={<Popover id='Delete Stored Ticker'>Save stored ticker <strong>{this.props.ticker.name}</strong> from <strong>{this.props.ticker.area}</strong></Popover>} delayShow={500}>
                            <Button onClick={this._saveTicker}><Glyphicon glyph="floppy-disk"/></Button>
                        </OverlayTrigger>

                        <OverlayTrigger placement="top" overlay={<Popover id='Delete Stored Ticker'>Save ticker as: <strong>{this.props.ticker.name}</strong> from <strong>{this.props.ticker.area}</strong></Popover>} delayShow={500}>
                            <Button><Glyphicon glyph="floppy-save"/></Button>
                        </OverlayTrigger>

                        <OverlayTrigger placement="top" overlay={<Popover id='Delete Stored Ticker'>Delete stored ticker <strong>{this.props.ticker.name}</strong> from <strong>{this.props.ticker.area}</strong></Popover>} delayShow={500}>
                            <Button onClick={this._deleteTicker}><Glyphicon glyph="trash"/></Button>
                        </OverlayTrigger>
                    </ButtonGroup>
            </span>
        );

        return (
            <Panel id={this.props.ticker.id} collapsible header={header} className="storedTickerFiles">
                <ListGroup fill>
                    {items}
                </ListGroup>
            </Panel>
        );

var头=(
{this.props.ticker.name}
);
返回(
{items}
);

在按钮

onClick

回调函数中，尝试以下操作

_callback(e){ e.stopPropagation(); }