When I click on a div, I want to retrieve the innermost element like so:
<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>
I believe this involves bubbling or capturing effects, but I am having trouble with it. I have tried using event.stopPropagation() and useCapture, but without success.
function capture (event) {
event.stopPropagation();
console.log(event.target);
}
document.querySelector('#show_trash_id').addEventListener('click', capture, true)
In summary, I am looking to display the following in the console log:
<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>