嵌入式按鈕在連結中,如何停止onClick連結的連鎖效應
P粉553428780
2023-08-17 21:31:04
<p>我有類似下面範例的程式碼。我正在嘗試創建一個可點擊的網格單元格,將用戶發送到一個URL,但是當點擊嵌入的圖像按鈕時,我只希望觸發onClick事件,而不是其他事件,是否有可能做到這樣?我嘗試添加一個stopPropagation的調用,但是在處理完第一個onClick後,它仍然會連結到底層的連結。 </p>
<pre class="brush:php;toolbar:false;">const handleSaveClick = async (e, activity, index) => {
e.stopPropagation();
…
}
<Grid item>
<a className={clsx(classes.link)}
href={payload.shareableUrl}
onClick={() => handleLinkClick(payload.url, index)}
>
<Tooltip title={payload.title}>
<Typography className={clsx(classes.copy)}>
{payload.title}
</Typography>
</Tooltip>
<Button
className={clsx(classes.savedButton)}
onClick={(e) => handleSaveClick(e, payload, index)}
>
<img
className={clsx(classes.savedIcon)}
src={payload.isSaved ? saved : notSaved}
/>
</Button>
</a>
</Grid></pre>
在handleSaveClick函式中,你可以使用e.preventDefault()函式。當點擊嵌入圖片按鈕時,handleSaveClick函數將被執行,e.preventDefault()應該阻止連結的預設行為,確保它不會導航到URL。
此外,你應該考慮用另一個合適的元素替換可點擊區域或按鈕的錨點標籤。