Eingebettete Schaltfläche im Link, wie man den Ketteneffekt des onClick-Links stoppt

Question

Ich habe einen Code, der dem folgenden Beispiel ähnelt. Ich versuche, eine anklickbare Rasterzelle zu erstellen, die den Benutzer zu einer URL weiterleitet, aber wenn auf die Schaltfläche mit dem eingebetteten Bild geklickt wird, soll nur das onClick-Ereignis und keine anderen Ereignisse ausgelöst werden. Ist das möglich? Ich habe versucht, einen Aufruf von stopPropagation hinzuzufügen, aber nachdem der erste onClick verarbeitet wurde, wird immer noch auf den zugrunde liegenden Link verwiesen.

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

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

Answer 1

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

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

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

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