如何用preventDefault阻止页面刷新？请教代码中该方法的放置位置

你判断的位置完全正确，就是要在hearts.forEach的点击事件处理逻辑里添加preventDefault()。原因是你选中的是<a>标签，这类标签点击后会触发默认跳转行为（哪怕href是空或者设为#，部分浏览器也会导致页面刷新或滚动），所以需要用preventDefault()阻断这个默认动作。

修改后的代码如下：

let navbar = document.querySelector(".navbar");

document.querySelector("#menu-btn").onclick = () => {
    navbar.classList.toggle('active');
}

window.onscroll = () => {
    navbar.classList.remove("active");
}

let hearts = document.querySelectorAll(".icons a");

hearts.forEach(a => {
    a.addEventListener("click", (e)=> {
        e.preventDefault(); // 阻止<a>标签的默认跳转/刷新行为
        a.classList.toggle("color");
    })
})

关键说明： #

• 点击事件的回调函数需要接收事件对象e（也可以命名为event等自定义名称）
• 在执行样式切换的代码前后调用e.preventDefault()都可以，通常建议放在开头，先阻断默认行为再执行自定义逻辑

内容的提问来源于stack exchange，提问作者JustHarlys