嵌入式按鈕在連結中，如何停止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(); // 阻止事件冒泡

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

此外，你應該考慮用另一個合適的元素替換可點擊區域或按鈕的錨點標籤。