0

Por que mi eventlistener también se agrega a los hijos?, hice este ejemplo sencillo para ilustrarlo, mi intención es que al dar click en el texto no solo se ponga en azul el texto, si no que se ponga en azul la caja entera

const boxes = document.querySelectorAll(".box")

boxes.forEach(node => {
  node.addEventListener("click", e => {
    e.target.classList.add("active")
  })

  const p = document.createElement("p")
  p.insertAdjacentHTML("afterbegin", `soy una caja!`)
  node.append(p)
})
.box {
  display: flex;
  justify-content: space-between;
  padding: 20px;
}

.active {
  background-color: blue;
}
<div class="container">
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
</div>

Lo que no quiero es que pase esto

Image from Gyazo

Lo que quiero es que se seleccione la caja entera, no solo el texto

Image from Gyazo

1 respuesta 1

1

Es por la Propagación de Eventos; al hacer click en <p>, como éste se encuentra dentro del <div> se genera un evento desde <p> que se propaga hacia <div> y en consecuencia se ejecutará tu código dos veces, una para <p> y otra para <div>.

Para corregir tu caso basta con utilizar el elemento objetivo actual durante la propagación en lugar del elemento detonante e.target.

const boxes = document.querySelectorAll(".box")

boxes.forEach(node => {
  node.addEventListener("click", e => {
    if(e.currentTarget.nodeName == 'DIV')
       e.currentTarget.classList.add("active")
  })

  const p = document.createElement("p")
  p.insertAdjacentHTML("afterbegin", `soy una caja!`)
  node.append(p)
})
.box {
  display: flex;
  justify-content: space-between;
  padding: 20px;
}

.active {
  background-color: blue;
}
<div class="container">
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
</div>

1
  • No sabia de la existencia de currentTarget, una pequeña mejora es quitar el if que no es necesario
    – Franco
    Commented el 14 ago. 2021 a las 22:47

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.