React：preventDefault（）不会阻止多个onClick事件被触发

Question

我正在使用React并尝试编写基本标签系统。标签是一个带有内部关闭按钮的矩形，就像这样（使用渲染方法）：

this.props.tabs.map(function(tab, index) {
    return (
      <a key={index} onClick={() => this.props.handleTabClick(index)}>
          <span className={"title"}>
            {tab.title}
          </span>
          <span className={"button"} onClick={(event) => {
              event.preventDefault();
              this.props.handleCloseTab(index);
          }}>
            <Glyphicon glyph="remove" className="glyph"/>
          </span>
      </a>
    );
}, this)

Glyphicon只是一个＆＃34; X＆＃34; icon我用于按钮，处理程序功能处理诸如突出显示相应选项卡和从列表中删除选项卡之类的内容。

然而，当我点击＆＃34; X＆＃34;按钮关闭选项卡，外部<a>标记和内部<span>的onClick函数被调用，它关闭选项卡并尝试导航到它。

event.preventDefault()似乎没有影响此行为。我尝试使用event.stopPropagation()代替，但它会刷新页面。

如何确保只触发一个事件？