EDIT
I think this has to do with custom elements. If I replace the button's child with a simple <p> we get the expected behavior (i.e. clicking on the child does not result in the parent's event handler being executed)
<div id="container">
<button disabled>
<p>X</p>
<button>
</div>
Say I have the following:
<div id="container">
<button disabled>
<some-custom-element>
< /* some svg stuff /* ></>
</some-custom-element>
<button>
</div>
say I have
$container = document.getElementById('container')
$container.addEventListener('click', () => {
// stuff
})
If I click the BUTTON (like the very edge of it, so not the child), I do not end up in the button's parent's click listener.
But if I click the button's child, the event makes its way up to the button's parent, despite the button being disabled. I had expected the propagation to stop at the disabled button but I don't really know why I expected that.
Is this expected?