在提供的JS代码块中应当在哪个位置添加preventDefault()？

你的猜测是问题的原因之一，还有一个核心用法错误需要修正：

1. preventDefault() 是事件对象的方法，不是DOM元素的方法。你之前直接调用el.preventDefault()、element.preventDefault()的写法本身就不符合规范，不管绑定到哪个元素上都不会生效，必须先在事件回调中接收事件对象参数，再通过事件对象调用该方法。
2. 你当前把点击事件绑定在li.nav-item上，但触发页面跳转默认行为的是li内部的<a>标签。虽然在li的事件回调中正确调用preventDefault()也能阻止跳转，但更合理的做法是直接把事件绑定到<a>标签上，避免事件冒泡带来的潜在问题。

另外你原有代码里if (element)的判断逻辑有问题：querySelectorAll返回的是NodeList集合，就算没有匹配到元素也会返回空集合，不会返回null，判断是否存在需要改为判断element.length是否大于0。

推荐修改方案（绑定事件到a标签） #

document.addEventListener("DOMContentLoaded", function(event) {
    // 直接选中导航的a标签绑定事件
    var navLinks = document.querySelectorAll('li.nav-item .nav-link');
    if (navLinks.length) {
        navLinks.forEach(function(link, key){
            // 回调接收事件对象参数e
            link.addEventListener('click', function (e) {
                // 阻止a标签的默认跳转行为
                e.preventDefault();
                const currentLi = link.closest('li.nav-item');
                currentLi.classList.toggle("active");
                // 其余导航项移除active
                navLinks.forEach(function(otherLink, otherKey){
                    if(key !== otherKey) {
                        otherLink.closest('li.nav-item').classList.remove('active');
                    }
                });
            });
        });
    }
});

保留绑定到li的修改方案 #

document.addEventListener("DOMContentLoaded", function(event) {
    var navItems = document.querySelectorAll('li.nav-item');
    if (navItems.length) {
        navItems.forEach(function(el, key){
            // 回调接收事件对象参数e
            el.addEventListener('click', function (e) {
                // 阻止默认跳转行为
                e.preventDefault();
                el.classList.toggle("active");
                navItems.forEach(function(ell, els){
                    if(key !== els) {
                        ell.classList.remove('active');
                    }
                });
            });
        });
    }
});

内容的提问来源于stack exchange，提问作者js-learner