stopPropagation does not work in Svelte 5 vs. works in Svelte 4

[michaelrommel]

Describe the bug

Hi,

I have a large element as a background that simulates an endless area. On top of that, individual rectangles shall be arranged by the user by dragging them. The drag handler from use-gesture handles the large element and for the individual rectangles (divs) a pointerdown handler was created, that captures the pointerdown element, sets that element into "moving" state and stops the propagation of the pointerdown event, so that the drag handler never sees it and does not start a drag event. This works in Svelte 4 but in Svelte 5 it no longer does.

I DO use the new onpointerdown syntax and I DO call event.stopPropagation() in the handler. Also stopImmediatePropagation does not prevent the event from bubbling up to the fabric's drag handler.

I have now scratched my head for several hours and have no solution. Is this a regression in Svelte 5 or is the library not usable with Svelte 5? I found several issues somehow related to what I am seeing, but all are closed and now supposed to be working:

#9688
#10165
#11365

If anyone has an idea or knows how that could be addressed, I would be glad to know.

The structure in the drags5 repo is as follows (for easier understanding without going to the repo):
The drag handler on the fabricEl still sees the pointerdown events.

<div
	style:position="absolute"
	style:inset="0px"
	style:z-index="-10"
	style:background-image="radial-gradient(#333 {zoom}px, transparent 0)"
	style:background-size="{24 * zoom}px {24 * zoom}px"
	style:background-position="{-zoom * center[0]}px {-zoom * center[1]}px"
></div>
<div
	style:position="absolute"
	style:inset="0px"
	style:overflow="hidden"
	style:background-color="rgba(1,1,1,0.5)"
	style:touch-action="none"
	id="fabricEl"
	bind:this={fabricEl}
>
	<div
		id="wrapper"
		style:position="absolute"
		style:background-color="red"
		style:padding="3rem"
		style:left={OFFSET_LEFT_CSS}
		style:top={OFFSET_TOP_CSS}
		style:transform-origin={OFFSET_TRANSFORM_ORIGIN_CSS}
		transition:fade|local
		use:slide={{
			x: movingSize.x,
			y: movingSize.y,
			center,
			zoom,
			immediate: true,
		}}
	>
		<div
			style:background-color="green"
			style:padding="2rem"
			onpointerdown={(event) => {
				console.log("startmoving");
				const [x, y] = normalizePosition(event);
				moving = 1;
				movingOrigin = [x - movingSize.x, y - movingSize.y];
				movingIsDone = false;
				event.stopPropagation();
				event.stopImmediatePropagation();
			}}
		>
			This is version 5.
		</div>
	</div>
</div>

Reproduction

There is a repo, where the two Svelte 4 and 5 versions live side by side, if anyone is interested: https://github.com/michaelrommel/drags.git

Logs

System Info

System:
    OS: macOS 13.7
    CPU: (20) arm64 Apple M1 Ultra
    Memory: 1.43 GB / 64.00 GB
    Shell: 5.9 - /bin/zsh
  Binaries:
    Node: 22.15.0 - ~/.local/share/mise/installs/node/22.15.0/bin/node
    Yarn: 1.22.19 - /opt/homebrew/bin/yarn
    npm: 10.9.2 - ~/.local/share/mise/installs/node/22.15.0/bin/npm
    pnpm: 10.9.0 - ~/.local/share/mise/installs/node/22.15.0/bin/pnpm
  Browsers:
    Chrome: 136.0.7103.114
    Edge: 135.0.3179.85
    Safari: 18.0.1

Severity

blocking an upgrade

[dummdidumm]

The problem is likely due to Svelte 5's event delegation mechanism. In essence, there's only one event listener on the root and it will then invoke the handlers in the tree in order. It's better for performance, but in cases like this when someone in the middle (in this case: the library you're using) is using node.addEventListener then that does not partake in the delegation chain, and so it will still get notified.

As a workaround for now you can use an action to listen to the click event via addEventListener to stop this.
We'll discuss having an option to turn event delegation off.

[michaelrommel]

I am now deep-diving into this event delegation concept. Will play around with the suggested method and keep this issue updated, once I find a solution. I have now a bit better understanding, but need more information on this delegation chain. The docs and migration guide were a bit sparse on this topic - I read them many times, but could not find an example or explanation and the svelte-preview docs linked in the issues were just pointing to the migration guide. Maybe there was a blog post about this that I can read up on? Thanks for the help!!

If I understand it correctly, using an action is not adding an addEventListener to the root, the action itself is added to the element and then I add the Eventlistener inside the action and that only goes to the element, is that about right?

[dummdidumm]

This section in the docs covers what event delegation is in more detail: https://svelte.dev/docs/svelte/basic-markup#Events-Event-delegation

Code-wise, what I mean something like this:

<script>
  function listen(node, { name, handler }) {
    node.addEventListener(name, handler)
    return { destroy: () => node.removeEventListener(name, handler) }
  }
</script>

<div use:listen={{ name: 'click', handler: (e) => e.stopPropagation() }}>...</div>

(this is a generalized action, you can of course do fine-grained ones for click etc

[michaelrommel]

This section in the docs covers what event delegation is in more detail: https://svelte.dev/docs/svelte/basic-markup#Events-Event-delegation

Oh man, this covers all I wanted to know and more. Now I am feeling stupid for sticking to the migration documentation instead of looking deeper into the standard docs... 😔

Closing this, as I can now work with a new mental model of svelte events in my head...

Thanks so much for the quick help. I needed at least 8 hours before I actually got a stripped down enough example to pinpoint the root cause. It's hard to migrat sb else's code and it breaks on you very subtle.