嵌入式按鈕在連結中,如何停止onClick連結的連鎖效應
Linda Hamilton
Linda Hamilton 2023-08-17 21:31:04
0
1
372

我有類似下面範例的程式碼。我正在嘗試創建一個可點擊的網格單元格,將用戶發送到一個URL,但是當點擊嵌入的圖像按鈕時,我只希望觸發onClick事件,而不是其他事件,是否有可能做到這樣?我嘗試添加一個stopPropagation的調用,但是在處理完第一個onClick後,它仍然會連結到底層的連結。

const handleSaveClick = async (e, activity, index) => { e.stopPropagation(); … }   handleLinkClick(payload.url, index)} >   {payload.title}     
Linda Hamilton
Linda Hamilton

全部回覆 (1)
P粉863295057

在handleSaveClick函式中,你可以使用e.preventDefault()函式。當點擊嵌入圖片按鈕時,handleSaveClick函數將被執行,e.preventDefault()應該阻止連結的預設行為,確保它不會導航到URL。

const handleSaveClick = async (e, activity, index) => { e.preventDefault(); // 阻止默认行为(跟随链接) e.stopPropagation(); // 阻止事件冒泡 // 在这里添加你的按钮点击逻辑 // ... }

此外,你應該考慮用另一個合適的元素替換可點擊區域或按鈕的錨點標籤。

    最新下載
    更多>
    網站特效
    網站源碼
    網站素材
    前端模板
    關於我們 免責聲明 Sitemap
    PHP中文網:公益線上PHP培訓,幫助PHP學習者快速成長!