Necesito obtener la mayor cantidad de elementos al hacer clic en un div... Como este...
<div id="show_trash_id" class="switch switch-xs"> <input type="checkbox"/> <span class="slider round"> <span class="text-on">ON</span> <span class="text-off">OFF</span> </span> </div> Creo que esto está relacionado con algún tipo de efecto de burbujeo o captura. Sin embargo, no puedo manejar eso ... Ya he intentado hacer event.stopPropagation() o usar useCature sin éxito.
function capture (event) { event.stopPropagation(); console.log(event.target); } document.querySelector('#show_trash_id').addEventListener('click', capture, true)En resumen, lo que quiero es que se muestre lo siguiente en la consola:
<div id="show_trash_id" class="switch switch-xs"> <input type="checkbox"/> <span class="slider round"> <span class="text-on">ON</span> <span class="text-off">OFF</span> </span> </div>He tenido este problema antes. Mi solución siempre ha sido usar una función anónima y usar la palabra clave this en lugar de event.target , ya que se refiere al elemento al que se agregó el detector de eventos.
Sin embargo, tenga en cuenta que la función anónima no puede ser una función de flecha, ya this en el contexto de una función de flecha es la ventana.
document.querySelector('#show_trash_id').addEventListener('click', function(e) { console.log(this); }); <div id="show_trash_id" class="switch switch-xs"> <input type="checkbox"/> <span class="slider round"> <span class="text-on">ON</span> <span class="text-off">OFF</span> </span> </div>