Javascript 如何停止子元素链接的默认行为

我正在使用bootstrap制作一张广告卡，我已将该卡放入

我的JS存在于外部文件中：

让favoriteBtn=document.getElementById（“favoriteAddCardBtn”）；
favoriteBtn.addEventListener（“鼠标覆盖”，鼠标覆盖favoriteBtn）；
favoriteBtn.addEventListener（“mouseout”，mouseOutFavoriteBtn）；
favoriteBtn.addEventListener（“单击”，单击favoriteBtn）；
功能鼠标OverFavoriteBtn（e）{
if（例如target.classList.contains（“fa-heart-o”））{
e、 target.classList.remove（“fa-heart-o”）；
e、 target.classList.add（“fa heart”）；
}
}
函数mouseOutFavoriteBtn（e）{
if（！（e.target.classList.contains（“文本危险”））{
e、 target.classList.remove（“fa heart”）；
e、 target.classList.add（“fa-heart-o”）；
}
}
函数onClickFavoriteBtn（）{
e=window.event | | e；
if（this==e.target）{
控制台日志（“点击Fav btn”）；
}
}

如果在锚元素的click event handler函数中单击按钮，则可以通过以下方式防止默认事件：

document.querySelector('a.text-dark.text-decoration-none').addEventListener("click", function(e){
   if(e.target.id == 'favoriteAdCardBtn'){
     e.preventDefault();
   }
});

演示：

让favoriteBtn=document.getElementById（“favoriteAddCardBtn”）；
favoriteBtn.addEventListener（“鼠标覆盖”，鼠标覆盖favoriteBtn）；
favoriteBtn.addEventListener（“mouseout”，mouseOutFavoriteBtn）；
favoriteBtn.addEventListener（“单击”，单击favoriteBtn）；
函数mouseOverFavoriteBtn（e）{
if（例如target.classList.contains（“fa-heart-o”））{
e、 target.classList.remove（“fa-heart-o”）；
e、 target.classList.add（“fa heart”）；
}
}
函数mouseOutFavoriteBtn（e）{
if（！（e.target.classList.contains（“文本危险”））{
e、 target.classList.remove（“fa heart”）；
e、 target.classList.add（“fa-heart-o”）；
}
}
函数onClickFavoriteBtn（e）{
e=window.event | | e；
if（this==e.target）{
控制台日志（“点击Fav btn”）；
}
}
document.querySelector（'a.text-dark.text-decoration none'）。addEventListener（“单击”，函数（e）{
如果（e.target.id=='FavoriteAddCardBtn'）{
e、 预防默认值（）；
}
});

我知道
href=“#”
但是href会有一个到广告页面的链接<代码>e.停止播放（）

没有停止链接的工作，我已经修复了

onclick

到

click

，这是我的错sorry@RaahimFareed，更新答案，请检查：）谢谢，这是工作。将代码更改为与

querySelectorAll