Estoy tratando de pasar a usar Javascript antiguo (alejándome de jQuery, debido a problemas de velocidad). Necesito activar un evento de clic en algo y luego alternar una clase en el elemento principal. Esto es lo que tengo:

document.querySelector('.wrapper-dropdown').addEventListener("click", function(event) {
   event.target.classList.toggle("active");
});

https://jsfiddle.net/h12o073L/17/

El problema que tengo es que SOLO quiero que el elemento principal agregue la clase, ¡no el niño! Actualmente, si hago clic en uno de los precios, se obtiene la clase .active (mientras que quiero que se agregue la clase al elemento .wrapper-dropdown)

Tengo que admitir que me he vuelto muy vago con jQuery, así que probablemente me estoy perdiendo algo simple;)

0
Andrew Newby 26 feb. 2018 a las 11:49

3 respuestas

La mejor respuesta

Debe usar la función .closest() para seleccionar el .wrapper-dropdown objetivo.

El método Element.closest() devuelve el ancestro más cercano del elemento actual (o el elemento actual en sí) que coincide con el selectores dados en el parámetro. Si no hay tal antepasado, devuelve null.

document.querySelector('.wrapper-dropdown').addEventListener("click", function(event) {
   event.target.closest('.wrapper-dropdown').classList.toggle("active");
});
document.querySelector('.wrapper-dropdown').addEventListener("click", function(event) {
  event.target.closest('.wrapper-dropdown').classList.toggle("active");
});
<div id="dd-price-from" class="wrapper-dropdown" tabindex="1">
  <span>Price From</span>
  <ul class="dropdown">
    <li data-what="20"><a href="#">€20</a></li>
    <li data-what="50"><a href="#">€50</a></li>
  </ul>
</div>
1
Zenoo 26 feb. 2018 a las 08:55

Desea que la clase .active solo se agregue a la .wrapper-dropdown. Puede usar la currentTarget, esto siempre se refiere al elemento donde adjunta el controlador de eventos.

document.querySelector('.wrapper-dropdown').addEventListener("click", function(event) {
   event.currentTarget.classList.toggle("active");
});
2
user9383661user9383661 26 feb. 2018 a las 08:53

Puede usar this dentro de la función de escucha de eventos:

document.querySelector('.wrapper-dropdown').addEventListener("click", function(event) {
 this.classList.toggle("active");

});

2
Sergii Vorobei 26 feb. 2018 a las 08:54