在此代码块中的何处添加 PreventDefault() ？

Question

在此代码中，我试图找出在哪里添加 PreventDefault()

document.addEventListener("DOMContentLoaded", function(event) {
    var element = document.querySelectorAll('li.nav-item');
    if (element) {
        element.forEach(function(el, key){
            el.addEventListener('click', function () {
                el.classList.toggle("active");
                element.forEach(function(ell, els){
                    if(key !== els) {
                        ell.classList.remove('active');
                    }
                });
            });
        });
    }
});

问题是我已经尝试过 element.preventDefault(), 和 el。甚至是埃尔。但没有看。

这是对应的html

<ul class="navbar-nav text-center">
    <li class="nav-item active">
        <a class="nav-link" aria-current="page" href="#">a</a>
    </li>
    <li class="nav-item">
        <a class="nav-link" href="#">a</a>
    </li>
    <li class="nav-item">
        <a class="nav-link" href="#">a</a>
    </li>
</ul>

问题是我标记的是“li”而不是“li”本身中的“a”吗？

Answer 1

使用触发点击事件的事件参数。并且，请改用preventDefault此处，因为您想停止单击事件。

document.addEventListener("DOMContentLoaded", function() {
    var element = document.querySelectorAll('li.nav-item');
    if (element) {
        element.forEach(function(el, key){
            el.addEventListener('click', function (event) {
                event.preventDefault();
                el.classList.toggle("active");
                element.forEach(function(ell, els){
                    if(key !== els) {
                        ell.classList.remove('active');
                    }
                });
            });
        });
    }
});