Version

3.0.2

Reproduction link

https://codepen.io/tatemz/pen/pobBBeb

Steps to reproduce

Create a container with a click event. Create a button inside of the container that is disabled. Put a span or some child element inside of the disabled button.

Clicking the disabled button should do nothing, as expected. Clicking the child element inside of the disabled button runs the container click event. This should not happen because the button is disabled.

<div @click.stop="parentTest">
  <button @click.stop="enabledTest">
    <span>Enabled Button</span>
  </button>
  <button @click.stop="disabledTest" :disabled="disabledBool">
    <span>Disabled Button</span>
  </button>
</div>

What is expected?

Clicking the disabled button should do nothing, as expected. Clicking the child element inside of the disabled button should NOT run the disabled button's parent container click event.

What is actually happening?

Clicking the disabled button should do nothing, as expected. Clicking the child element inside of the disabled button runs the disabled button's parent container click event.

This is expected behavior but it's unrelated to Vue, it happens in vanilla JS as well