Estoy tratando de agregar detectores de eventos a los botones en una página web, mi botón contiene varios elementos secundarios, cuando hago clic en mi botón solo necesito obtener los datos asociados con el botón, como los atributos de datos.
Incluso después de agregar un event.stopPropogation() en mi controlador de clic, sigo viendo que cuando hago clic directamente sobre un elemento h2 no hay atributos de datos registrados.
¿Qué me falta exactamente en mi código?
const button = document.querySelector('[data-toggle="collapse"]') button.addEventListener('click', (e) => { e.stopPropagation() const target = e.target.dataset console.log(target) }, false) <body> <button type="button" data-target="hello" data-toggle="collapse"> <div class="row"> <div class="col"> <h2> My heading 2 </h2> </div> </div> </button> </body>Detener la propagación funciona al revés. Puede ver cómo funciona aquí: ¿Cuál es la diferencia entre event.stopPropagation y event.preventDefault?
Lo que debe hacer es obtener los datos de e.currentTarget en lugar de e.target.
const button = document.querySelector('[data-toggle="collapse"]') button.addEventListener('click', (e) => { const target = e.currentTarget.dataset console.log(target) }, false);