Tengo dos elementos div, inner y outer . Estoy activando el evento de clic en el div inner mediante programación solo una vez. Pero el registro muestra que el controlador de eventos se invoca dos veces en el div inner . Aquí está el código. ¿Puede por favor ayudar a entender por qué sucede esto? El código también está alojado en codesandbox
const inner = document.querySelector(".inner"); const outer = document.querySelector(".outer"); function clk(event) { console.log("click"); console.log(event.target); } inner.addEventListener("click", clk); outer.addEventListener("click", clk); inner.click(); <div class="outer" id="div1"> <div class="inner" id="div2"></div> </div>Esto se debe al burbujeo de eventos .
Lo que está pasando es:
click en el inner .inner .click se expande hacia el exterior.outer se llama El objetivo es inner en ambas llamadas a la función clk , porque es una propiedad del evento inicial. No depende del elemento en el que esté registrado el oyente.
agregar
event.stopPropagation()a su función clk