Butang terbenam dalam pautan, bagaimana untuk menghentikan kesan rantaian pautan onClick

Question

Saya mempunyai kod yang serupa dengan contoh di bawah. Saya cuba mencipta sel grid boleh klik yang menghantar pengguna ke URL, tetapi apabila butang imej terbenam diklik saya hanya mahu acara onClick menyala dan tiada acara lain, adakah mungkin untuk melakukan ini? Saya cuba menambah panggilan ke stopPropagation, tetapi selepas onClick pertama dikendalikan, ia masih memaut ke pautan asas.

const handleSaveClick = async (e, aktiviti, indeks) =>
  e.stopPropagation();
  ...
}

<Item grid>
  <a className={clsx(classes.link)}
     href={payload.shareableUrl}
     onClick={() => handleLinkClick(payload.url, index)}
  >
    <Tooltip title={payload.title}>
       <Nama kelas tipografi={clsx(classes.copy)}>
                   {payload.title}
       </Tipografi>
       </Petua alat>
          <Butang
                  className={clsx(classes.savedButton)}
                  onClick={(e) => handleSaveClick(e, muatan, indeks)}
          >
            <img
                className={clsx(classes.savedIcon)}
                src={payload.isSaved ?
            />
          </Butang>
  </a>
</Grid>

Answer 1

Dalam fungsi handleSaveClick, anda boleh menggunakan fungsi e.preventDefault(). Apabila butang imej benam diklik, fungsi handleSaveClick akan dilaksanakan, e.preventDefault() harus menghalang tingkah laku lalai pautan, memastikan ia tidak menavigasi ke URL.

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

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

Selain itu, anda harus mempertimbangkan untuk menggantikan tag penambat kawasan atau butang yang boleh diklik dengan elemen lain yang sesuai.