Butang terbenam dalam pautan, bagaimana untuk menghentikan kesan rantaian pautan onClick
P粉553428780
P粉553428780 2023-08-17 21:31:04
0
1
433
<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>
P粉553428780
P粉553428780

membalas semua(1)
P粉863295057

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.

Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan