Bouton intégré dans le lien, comment arrêter l'effet de chaîne du lien onClick
P粉553428780
2023-08-17 21:31:04
<p>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. </p>
<pre class="brush:php;toolbar:false;">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></pre>
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.
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é.