Javascript 正在停止传播包含工具提示的按钮，该按钮上的链接不起作用

我使用的是MaterialUI按钮组件，按钮中有文本。在文本旁边，我有一个工具提示。在工具提示中，有一个指向文章的链接。我的想法是，在单击实际按钮之前，我希望用户有机会单击工具提示中的“阅读更多”链接。问题在于，当单击工具提示中的“阅读更多”链接时，它实际上会单击按钮。我已经尝试使用e.stopPropagation事件来阻止组件冒泡到其他元素。但是它仍然不能阻止点击按钮而不是工具提示中的“阅读更多”链接。请参阅下面我的代码：

render() {
    const { buttonStyleOverride, classes } = this.props;
    const { buttonDisabled } = this.state;
    return (
      <Button
        name="buyItem"
        variant="outlined"
        style={buttonStyleOverride}
        className={classes.button}
        color="primary"
        disabled={buttonDisabled}
        onClick={
          this.addItems,
          e => e.stopPropagation()
        }>
        Buy Pikafoods
        <TooltipIcon
          title="You can read more about pikafoods here."
          learnMoreLink="https://pokemon.com/articles/pikafoods"
          style={{ position: 'relative', top: '-2px' }} />
      </Button>
    );
  }
}

render（）{
const{buttonStyleOverride，classes}=this.props；
const{buttonDisabled}=this.state；
返回(
e、 停止传播（）
}>
购买皮卡食品
);
}
}

奇怪的是，按钮中有一个可点击的工具提示，对用户不太友好。 但是，必须在工具提示事件（而不是按钮）中停止传播，如下所示：

import { Button } from "@material-ui/core";
import AccessibilityIcon from "@material-ui/icons/Accessibility";

export default function App() {
  return (
    <div className="App">
      <Button
        name="buyItem"
        variant="outlined"
        color="primary"
        onClick={(e) => console.log("button")}
      >
        Buy Pikafoods
        <AccessibilityIcon
          onClick={(e) => {
            console.log("tooltip");
            e.stopPropagation();
          }}
        />
      </Button>
    </div>
  );
}

从“@material ui/core”导入{Button}；
从“@material ui/icons/Accessibility”导入AccessibilityIcon；
导出默认函数App（）{
返回(
console.log（“按钮”）}
>
购买皮卡食品
{
控制台日志（“工具提示”）；
e、 停止传播（）；
}}
/>
);
}