リンク内の埋め込みボタン、onClick リンクのチェーン効果を停止する方法

Question

以下の例のようなコードがあります。ユーザーを URL に送信するクリック可能なグリッド セルを作成しようとしていますが、埋め込み画像ボタンがクリックされたときに onClick イベントのみを発生させ、他のイベントは発生させないようにしたいのですが、これは可能ですか? stopPropagation への呼び出しを追加しようとしましたが、最初の onClick が処理された後も、基になるリンクにリンクされたままになります。

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

＜グリッド項目＞
  <a クラス名={clsx(classes.link)}
     href={payload.shareableUrl}
     onClick={() => handleLinkClick(payload.url, インデックス)}
  >
    <ツールヒント title={payload.title}>
       <タイポグラフィクラス名={clsx(classes.copy)}>
                   {ペイロード.タイトル}
       </タイポグラフィ>
       </ツールチップ>
          <ボタン
                  className={clsx(classes.savedButton)}
                  onClick={(e) => handleSaveClick(e, ペイロード, インデックス)}
          >
            <画像
                className={clsx(classes.savedIcon)}
                src={payload.isSaved ? 保存されました : notSaved}
            />
          </ボタン>
  </a>
</グリッド>

Answer 1

handleSaveClick 関数では、e.preventDefault() 関数を使用できます。 [画像の埋め込み] ボタンをクリックすると、handleSaveClick 関数が実行されます。e.preventDefault() はリンクのデフォルトの動作を防止し、リンクが URL に移動しないようにする必要があります。

リーリー

さらに、クリック可能な領域またはボタンのアンカー タグを別の適切な要素に置き換えることを検討する必要があります。