tengo una delegacion de eventos click de esta manera:
document.addEventListener("click",function(e){
console.log(e.target)
},false);
con esto cada vez que hago click sobre algun item del menu de bootstrap (o sobre cualquier cosa del viewport) me imprime en consola dicho item, si sigo haciendo click sobre el mismo item sigue imprimiendo como deberia esperarse, pero cuando dicho item tiene un submenu (dropdown) solo toma el evento 1 vez, lo imprime por consola 1 vez, si sigo dando click ya no lo toma. por que sucede esto? como podria captar el click cada vez que lo hago? me di cuenta como cambiar de posicion los carets con css y queria usar un toggler para cambiar la clase, pero me encontre con este problema, ya que solo lo cambia una vez, por el dichoso comportamiento del dropdown
aqui dejo ejemplo, espero sirva:
document.addEventListener("click",function(e){
console.log(e.target)
},false);
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Prueba</title>
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l" crossorigin="anonymous">
</head>
<body>
<!-- navegacion -->
<nav class="navbar navbar-expand-lg navbar-light bg-light shadow-sm fixed-top">
<div class="container">
<a class="navbar-brand cierraContainer cierraHambur" href="#">LOGO</a>
<button type="button" class="navbar-toggler" data-toggle="collapse" data-target="#navbar">
<i class="material-icons hamburguesa">menu</i>
</button>
<div class="navbar-collapse collapse cierraHambur" id="navbar">
<ul class="navbar-nav ml-auto" id="contenedorItemsNav">
<li class="nav-item"><a class="nav-link cierraHambur contenidoModal" id="nosotros"
href="#">Nosotros</a></li>
<li class="nav-item"><a class="nav-link cierraHambur" id="unirse" href="#">Unirse</a></li>
<li class="nav-item"><a class="nav-link cierraHambur" id="contacto" href="#">Contacto</a></li>
<li class="nav-item"><button type="button" class="btn btn-info my-2 my-md-0" id="ingresar" data-toggle="modal"
data-target="#exampleModal"><i
class="material-icons align-text-bottom pr-1 tamanoIconosNav">login</i>Ingresar</button>
</li>
<li class="nav-item dropdown"><a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#">Lenguaje</a>
<div class="dropdown-menu">
<a class="dropdown-item cierraHambur" href="#">Español</a>
<a class="dropdown-item cierraHambur" href="#">English</a>
</div>
</li>
</ul>
</div>
</div>
</nav>
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-Piv4xVNRyMGpqkS2by6br4gNJ7DXjqk09RmUpJ8jgGtD7zP9yug3goQfGII0yAns" crossorigin="anonymous"></script>
<script src="prueba.js"></script>
</body>
</html>