En este código, estoy tratando de averiguar dónde agregar 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'); } }); }); }); } });El problema es que probé element.preventDefault(), con el. e incluso ell. pero sin mirar.
Este es el html correspondiente
<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>¿El problema es que estoy apuntando a la 'li' y no a la 'a' dentro de la 'li' misma?
Use un parámetro de evento donde se active su evento de clic. Y use preventDefault allí en su lugar, ya que desea dejar de hacer clic en el evento.
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'); } }); }); }); } });preventDefault es una propiedad del evento, no del elemento en sí. No estoy seguro de su caso de uso exacto, pero puede intentar algo como lo siguiente.
(Es decir, agregue un parámetro al controlador onclick, llamado e , y llame a e.preventDefault(); )
el.addEventListener('click', function (e) { e.preventDefault(); // <-- here el.classList.toggle("active"); element.forEach(function(ell, els){ if(key !== els) { ell.classList.remove('active'); } }); });