纯JavaScript中<a>标签onClick事件失效问题求助

核心问题是你把event.preventDefault()放在了容器点击事件的最外层，不管点击的是锚点链接还是外部链接，都直接阻止了浏览器的默认跳转行为。正确的做法是仅在处理锚点链接时阻止默认行为，让外部链接正常执行浏览器的默认跳转逻辑。

修改后的JavaScript代码如下：

document.querySelector('.nav').addEventListener("click", (event) => {
    let elementOffset = 0;
    let parent = document.querySelector('.nav');
    let menuItem = parent.querySelectorAll('.nav__link');
    const target = event.target;

    // 仅当点击的是带data-scroll属性的锚点链接时，阻止默认跳转
    if (target.hasAttribute('data-scroll')) {
        event.preventDefault();
    }

    if(target.classList.contains('nav__link')) {
        // 用forEach简化移除active类的逻辑
        menuItem.forEach(item => item.classList.remove('active'));
    }

    let elementId = target.getAttribute('data-scroll');
    let element = target;

    if(elementId && element){
        elementOffset = getElementScrollOffset(elementId);
        scrollToTop(elementOffset);
        element.classList.add('active');
    }
});

关键改动说明： #

• 将event.preventDefault()移至target.hasAttribute('data-scroll')的判断条件内，仅对锚点链接生效，外部链接不受影响。
• 把原有的for循环替换为forEach，简化代码逻辑（可选优化，不影响功能）。
• 给event.target定义变量target，避免重复调用提升可读性。

额外优化建议：可以把锚点链接的href="#"改成对应data-scroll的值（比如href="#about"），这样即使JavaScript失效，也能触发原生锚点跳转，增强页面兼容性。示例：

<a class="nav__link active" href="#about" data-scroll="#about">about</a>

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