React中event.stopPropagation阻止事件冒泡失效问题求助

在React + MUI开发中，当CardActionArea通过component={RouterLink}设置为跳转链接时，内部嵌套的Button点击后会同时触发CardActionArea的点击事件，即便调用event.stopPropagation()也无法解决——核心原因在于RouterLink的跳转逻辑基于原生事件，React合成事件的stopPropagation()无法阻止原生事件的传播链，同时RouterLink的默认跳转行为也会被触发。

下面提供两种可行的解决方案：

方案一：阻止按钮的事件传播与默认行为 #

直接在按钮的点击事件中同时阻止合成事件冒泡和默认跳转行为，点击按钮时既不会触发CardActionArea的点击逻辑，也不会触发RouterLink的跳转：

修改事件处理函数：

function subscribeClick(event) {
  // 阻止合成事件冒泡
  event.stopPropagation();
  // 阻止RouterLink的默认跳转行为
  event.preventDefault();
  console.log("button was clicked");
}

function cardClick() {
  console.log("card was clicked");
}

组件调用代码无需额外修改，保持原有结构即可。

方案二：在CardActionArea的点击事件中过滤按钮点击 #

如果不需要阻止RouterLink跳转，仅不想执行cardClick的逻辑，可以在CardActionArea的点击事件中判断点击目标是否为Button元素，若是则跳过逻辑执行：

修改cardClick函数：

function cardClick(event) {
  // 检查点击目标是否为Button或Button的子元素
  if (event.target.closest('.MuiButton-root')) {
    return;
  }
  console.log("card was clicked");
}

这种方式下，按钮的subscribeClick函数无需修改，事件冒泡上来后会被cardClick函数过滤掉。

关键说明 #

之前的stopPropagation()无效，是因为CardActionArea使用component={RouterLink}后，跳转逻辑通过原生a标签事件实现，React合成事件机制无法完全拦截原生事件的传播。preventDefault()可直接阻止RouterLink的跳转行为，而目标元素判断则是从事件源层面过滤按钮的点击触发。

内容的提问来源于stack exchange，提问作者Justin Zitel