event.stopPropagation() does not work when nested element within event using onMount()

[fijiaaron]

Describe the bug

event.stopPropagation() appears to not work when an outer element has an event listener added via onMount() and an inner element has an event listener added via onclick()

Stop propagation works when using on:click but does not work for onclick

The expected behavior is that onclick() should stop propagation, the same as on:click() did.

Reproduction

Example:
https://svelte.dev/playground/eb16168190f3490dad1e8cdbccdcfacf?version=5.23.1

If you click on the outer element (i.e. the "count" text) it adds 2.
If you click on the inner element (i.e. the number) it should add 1.
But because stopPropagation() does not work, it adds 3.

Logs

System Info

System:
    OS: macOS 15.6.1
    CPU: (10) arm64 Apple M1 Pro
  Binaries:
    Node: 22.15.0 - /Users/aaronevans/.nvm/versions/node/v22.15.0/bin/node
    npm: 10.9.2 - /Users/aaronevans/.nvm/versions/node/v22.15.0/bin/npm
  Browsers:
    Brave Browser: 141.1.83.118
    Chrome: 142.0.7444.60
  npmPackages:
    svelte: ^5.41.0 => 5.43.2

Severity

annoyance

[brunnerh]

Svelte 5 uses event delegation for performance, stopPropagation in an on<name> handler only marks the event without actually stopping its propagation.

Manually added events should use the on function to hook into that mechanism.

+ import { on } from "svelte/events";

- element.addEventListener("click", () => {
+ on(element, "click", () => {

Playground

[Antonio-Bennett]

@brunnerh I'm pretty sure Rich ripped out even delegation in #17030 😅

[7nik]

No, that PR removed event handler hoisting - making the function be shared across all component instances.