在 onClick 事件上标记 not working on pure javascript

Question

我遇到了以下问题。 我做了一个登陆页面，通过纯 javascript 链接到页面部分，一切似乎都有效，超级。 但是，我想添加一个常规的 <а></а> 链接，结果发现它不起作用，我知道原因在于 event.preventDefault(); 但是如果删除它，那么主脚本就会中断

document.querySelector('.nav').addEventListener("click", (event) => {
    event.preventDefault();
    let elementOffset = 0;

    let parent = document.querySelector('.nav');
    let menuItem = parent.querySelectorAll('.nav__link');

    if(event.target.classList.contains('nav__link')) {
        for (let i = 0; i < menuItem.length; i++) {
            menuItem[i].classList.remove('active');
        }
    }

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

    if(elementId && element){
        elementOffset = getElementScrollOffset(elementId);

        scrollToTop(elementOffset);

        element.classList.add('active');
    }
});

<div class="header__inner">
                <div class="header__logo" data-scroll="#intro"></div>
                <nav class="nav" id="nav">
                    <a class="nav__link active" href="#" data-scroll="#about">about</a>
                    <a class="nav__link" href="#" data-scroll="#services">services</a>
                    <a class="nav__link" href="#" data-scroll="#mods">Сmods</a>
                    <a class="nav__link" href="#" data-scroll="#updates">updates</a>
                    <a class="nav__link" href="#" data-scroll="#footer">Кfooter</a>
                    <a class="nav__link" href="https://www.google.com/" target="_blank">Discord</a>
                </nav>
            </div>

如果删除 event.preventDefault(); 它没有去它，而是把我带到了首页。 是的，我知道您可以在 .nav 元素之外插入一个链接，但我需要它。 请帮助:)

Answer 1

如果单击的链接不是页内锚点，您需要在单击处理程序中执行的操作是阻止代码的执行。 您可以通过检查单击的<a>元素的href是否不等于#来做到这一点。 您可以通过如下修改您的处理程序来做到这一点：

document.querySelector('.nav').addEventListener("click", (event) => {
  if (event.target.getAttribute('href') !== '#') { return; }

  /* rest of handler logic remains the same */
});

我创建了一个小提琴供参考。