标记a在onClick事件上的纯javascript上不起作用

14ifxucb  于 2023-01-16  发布在  Java
关注(0)|答案(1)|浏览(157)

我遇到了以下的问题。我做了一个登陆页面,通过纯javascript链接到页面部分,一切看起来都很好,超级好。但是,我想添加一个常规的〈a〉〈/a〉链接,结果它不起作用,我理解原因在于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>

如果您删除事件. preventDefault();而不是去它,它把我带到顶部页面。是的,我理解你可以在. nav元素之外插入一个链接,但我需要它在那里。帮助pls:)

rekjcdws

rekjcdws1#

如果单击的链接不是页内锚,则需要在单击处理程序中阻止代码执行。可以通过检查单击的<a>元素的href不等于#来实现此目的。可以通过如下修改处理程序来实现此目的:

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

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

我创建了一个fiddle以供参考。

相关问题