2

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>

1

1 respuesta 1

2

Al parecer, Bootstrap captura el evento delegado y no permite que se propague. Una posible solución es asignar el evento directamente en cada elemento para evitar ese comportamiento.

Precaución: Al menos en las pruebas con este fragmento de código, puedes capturar el evento y, después, Bootstrap asigna o modifica el atributo aria-expanded y debes tenerlo en cuenta para modificar el icono.

// Si ya cargaste la librería jQuery, úsala para asignar el evento
$('.dropdown-toggle').on('click', e => {
    console.log(e.target);
    // Después de esto,  Bootstrap asigna o modifica el atributo aria-expanded
});
<!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>

1
  • asi si funciona, muchas gracias!! Commented el 19 feb. 2021 a las 2:37

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.