嵌入式按钮在链接中,如何停止onClick链接的连锁效应
P粉553428780
P粉553428780 2023-08-17 21:31:04
0
1
367

我有类似下面示例的代码。我正在尝试创建一个可点击的网格单元格,将用户发送到一个URL,但是当点击嵌入的图像按钮时,我只希望触发onClick事件,而不是其他事件,是否有可能做到这样?我尝试添加一个stopPropagation的调用,但是在处理完第一个onClick后,它仍然会链接到底层的链接。

const handleSaveClick = async (e, activity, index) => { e.stopPropagation(); ... }   handleLinkClick(payload.url, index)} >   {payload.title}     
P粉553428780
P粉553428780

全部回复 (1)
P粉863295057

在handleSaveClick函数中,你可以使用e.preventDefault()函数。当点击嵌入图片按钮时,handleSaveClick函数将被执行,e.preventDefault()应该阻止链接的默认行为,确保它不会导航到URL。

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

此外,你应该考虑用另一个合适的元素替换可点击区域或按钮的锚点标签。

    最新下载
    更多>
    网站特效
    网站源码
    网站素材
    前端模板
    关于我们 免责声明 Sitemap
    PHP中文网:公益在线PHP培训,帮助PHP学习者快速成长!