sveltejs/svelte

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

Opened this issue · 3 comments

fijiaaron commented

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 commented

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

  • 👍1
Antonio-Bennett commented

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

7nik commented

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

  • 👍1