Bouton intégré dans le lien, comment arrêter l'effet de chaîne du lien onClick

Question

J'ai un code similaire à l'exemple ci-dessous. J'essaie de créer une cellule de grille cliquable qui envoie l'utilisateur vers une URL, mais lorsque l'on clique sur le bouton de l'image intégrée, je veux uniquement que l'événement onClick se déclenche et aucun autre événement, est-il possible de faire cela ? J'ai essayé d'ajouter un appel à stopPropagation, mais une fois le premier onClick géré, il renvoie toujours au lien sous-jacent.

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

<Élément de grille>
  <a className={clsx(classes.link)}
     href={payload.shareableUrl}
     onClick={() => handleLinkClick(payload.url, index)}
  >
    <Tooltip title={payload.title}>
       <Typographie className={clsx(classes.copy)}>
                   {charge utile.titre}
       </Typographie>
       </Info-bulle>
          <Bouton
                  className={clsx(classes.savedButton)}
                  onClick={(e) => handleSaveClick(e, charge utile, index)}
          >
            <img
                className={clsx(classes.savedIcon)}
                src={payload.isSaved ? enregistré : notSaved}
            />
          </Bouton>
  ≪/a>
</Grille>

Answer 1

Dans la fonction handleSaveClick, vous pouvez utiliser la fonction e.preventDefault(). Lorsque vous cliquez sur le bouton d'intégration de l'image, la fonction handleSaveClick sera exécutée, e.preventDefault() devrait empêcher le comportement par défaut du lien, en garantissant qu'il ne navigue pas vers l'URL.

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

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

De plus, vous devriez envisager de remplacer la balise d'ancrage d'une zone ou d'un bouton cliquable par un autre élément approprié.