Vue doesn't support stopImmediatePropagation()

[jods4]

What problem does this feature solve?

In native web, you can prevent further event listeners from running by calling stopImmediatePropagation.
This doesn't work when using Vue, because Vue puts all functions into its own array and executes them regardless, from a single native event handler.

Example:

<!-- consumer of ui-form component -->
<ui-form @submit='...'>
</ui-form>

<!-- ui-form component itself -->
<form @submit='submit'><slot /></form>

<script>
function submit(e) {
  if (invalid) e.stopImmediatePropagation();
}
</script>

---

In this example the alternative would be to have the component emit a custom, different event; that consumer could listen to.
Or add an artificial DOM wrapper so that stppPropagation could be used instead.

What does the proposed API look like?

No new public API, but a change of behavior to match intuitive native web expectations.
Would be nice if somehow Vue could notice a call to stopImmediatePropagation and act accordingly.

[LinusBorg]

Hm. Is there any way to find out wether an event's stopImmediatePropagation has been called?

There's event.defaultPrevented for event.preventDefault() but I'm not aware of anything similar for stopImmediatePropagation.

So should we monkeypatch the method of the event to be able to track it? I don't really see any other way for Vue to be aware that this was called and stop calling the rest of the listeners.

[jods4]

No, there is not. I checked when opening the issue, which would have been trivial otherwise.

You'd have to monkeypatch stopImmediatePropagation on every event.
Maybe it's a bit excessive for something that has a very narrow use case?

The current behavior is unintuitive and I got caught off guard by it. Took me a few minutes to understand why it wasn't doing what I expected.

On the other hand, I think the only situation where you'd encounter this is when you have a component that subscribes to say, @submit and has attributes fallthrough, where the parent adds @submit on the component itself.

You end up with two events on the same element, and the inner one (the component), would be able to stopImmediatePropagation before the other one (the parent) gets a chance to see it.

Useful, intuitive with respect to web standards but narrow case.

You can of course set arrays on events, but that's probably even less common.