Butang terbenam dalam pautan, bagaimana untuk menghentikan kesan rantaian pautan onClick
P粉553428780
2023-08-17 21:31:04
<p>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. </p>
<pre class="brush:php;toolbar:false;">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></pre>
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.
Selain itu, anda harus mempertimbangkan untuk menggantikan tag penambat kawasan atau butang yang boleh diklik dengan elemen lain yang sesuai.