Feature request: event handlers with only modifiers, e.g. on:click|stopPropagation

[ghost]

stopPropagation can be useful on its own, as a way of catching "cancel when user clicks away" functionality and preventing it from being triggered by clicks that originate within the focused thing itself.

It would be nice to be able to use the event modifier without having to supply a "noop" handler, e.g.

<div on:click|stopPropagation>
    ...
</div>

[Conduitry]

I think this would be confusing. An event directive with no handler and no modifiers means an event that's forwarded to the parent component. This would make adding modifiers to it do something completely different.

[ghost]

Ah yeah, forgot about that feature. Doesn't seem worth it in that case.

[Rich-Harris]

I have wanted this myself in the past. What if we had something like this?

<div on:click|stopPropagation={}>
  ...
</div>

It's not not confusing, but it is arguably nicer than on:click={e => e.stopPropagation()}

[Conduitry]

I was also thinking about something like that. Do we want the ={} to be equivalent to some other thing in general, like ={null} or ={undefined}? Do we want event handlers in general to check (at compile time? at run time?) whether they're truthy before running? (Semi-related: #3040.) I can see the desire to stop the addition of this feature from getting out of hand, but I also think it would be weird to have a one-off, special ={} syntax just for event handlers.

[Rich-Harris]

Yeah, it's definitely a straw man. I'll reopen this anyway, in case we think of something better

[antony]

Going to vote against this mostly, since on:click={e => e.stopPropagation()} isn't that difficult, and we have other stuff to fix.

If it did get turned into a feature, I'd suggest on:click|stopPropagation not ={}.

[stale]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

[aradalvand]

I think this is something most people intuitively expect Svelte to already do, so I don't think this issue should be closed.

[bluwy]

+1 for on:click={e => e.stopPropagation()} too. I don't think the extra complexity for both compile-time and runtime is worth supporting this.

[johnnysprinkles]

Are you sure this doesn't already work, at least as of today? I'm using bare|preventDefault and |stopPropagation all over my codebase, on keydown, mousedown, copy, paste, click, etc, seems to do what one expects...

[aradalvand]

Apprently, it does work now: https://svelte.dev/repl/d3f83ef507d74e558f5a25bd8fd24e0c?version=3.46.4
I'm not sure why, maybe this feature was silently added?!

[bluwy]

on:click|preventDefault works now but it also forwards the event up to parent. IIUC this issue proposes on:click|preventDefault={} to prevent forwarding.

[Rich-Harris]

Since on:x and event modifiers are essentially deprecated in Svelte 5 (in favour of callback props and function composition), I'll close this