Do disabled button's children bubble?

56 Views Asked by At

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?

0

There are 0 best solutions below