Skip to main content
se añadieron 3227 caracteres en el cuerpo
Origen Enlace

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>

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>

Origen Enlace

Porque los dropdowns de bootstrap toman el e.target solo una vez?

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