小编Kr1*_*1ss的帖子

我在 SO 上搜索了很多，但找不到任何 100% 有效的答案。我的问题是，我的 NextJs 应用程序中有一个围绕<Link> 标签的卡片组件。我里面还有一个<Link>标签、2 个外部链接（<a>标签）和一个按钮。但这些都不起作用。我尝试放置position: relative按钮和锚标记，但它部分解决了问题（只有使用鼠标中键单击才能导航到链接，这会打开指向新选项卡的链接）。我想让它起作用，以便记录任何点击。

卡组件

<Link href={`/${song.singer}/${song.title}`} passHref>
        <div className={style.cardOutter}>
            <div className={style.cardHeader} style={{ backgroundImage: `url(${sdDefault(song.thumbnail)})` }}></div>
            <div className={style.cardBody}>
                <p>{song.title}</p>
                {song.fts !== '' ? 
                    <div className={style.card_fts}>
                        <span>{song.fts}</span>    
                    </div>
                :
                    null
                }
                <div className={style.cardInfoCont}>
                    <small>[{song.lang}] {song.album} - {song.genre}</small>
                </div>
            </div>
            <div className={style.cardButtons}>
                <a href={`https://www.youtube.com/watch?v=${song.thumbnail}`} target='_blank' rel='noreferrer' title='Listen On YouTube'><YouTubSimpleIcon color='#ff0000' width={30} height={30} /></a>
                <button disabled={!authContext.isAuth} title='Add To Favouarites'><HeartIcon color='#ff0000' width={30} height={30} /></button>
                <a href={`https://open.spotify.com/${song.spotifyURL === undefined ? …