嵌入式按钮在链接中，如何停止onClick链接的连锁效应

Question

我有类似下面示例的代码。我正在尝试创建一个可点击的网格单元格，将用户发送到一个URL，但是当点击嵌入的图像按钮时，我只希望触发onClick事件，而不是其他事件，是否有可能做到这样？我尝试添加一个stopPropagation的调用，但是在处理完第一个onClick后，它仍然会链接到底层的链接。

const handleSaveClick = async (e, activity, index) => {
  e.stopPropagation();
  ...
}

<Grid item>
  <a className={clsx(classes.link)}
     href={payload.shareableUrl}
     onClick={() => handleLinkClick(payload.url, index)}
  >
    <Tooltip title={payload.title}>
       <Typography className={clsx(classes.copy)}>
                   {payload.title}
       </Typography>
       </Tooltip>
          <Button
                  className={clsx(classes.savedButton)}
                  onClick={(e) => handleSaveClick(e, payload, index)}
          >
            <img
                className={clsx(classes.savedIcon)}
                src={payload.isSaved ? saved : notSaved}
            />
          </Button>
  </a>
</Grid>

Answer 1

在handleSaveClick函数中，你可以使用e.preventDefault()函数。当点击嵌入图片按钮时，handleSaveClick函数将被执行，e.preventDefault()应该阻止链接的默认行为，确保它不会导航到URL。

const handleSaveClick = async (e, activity, index) => {
  e.preventDefault(); // 阻止默认行为（跟随链接）
  e.stopPropagation(); // 阻止事件冒泡

  // 在这里添加你的按钮点击逻辑
  // ...
}

此外，你应该考虑用另一个合适的元素替换可点击区域或按钮的锚点标签。