`stopPropagation` on parent breaks all event listeners of same type for children

[corneliusio]

Describe the bug

Using stopPropagation on a parent element to create a boundary for event bubbling causes all of the event handlers for that event type (when attached directly with the onevent attribute) on children of that element to stop working.

This behavior only exists when using the Svelte 5 syntax for attaching events to elements (e.g. using on:event works, but onevent does not).

Reproduction

<script>
    function onClick() {
        console.log('CLICKED')
    }

    function stopPropagation(el, type) {
        el.addEventListener(type, event => event.stopPropagation())
    }
</script>

<div>
    <button onclick={onClick}>Click me, I work.</button>
</div>

<div use:stopPropagation={'click'}>
    <button onclick={onClick}>Click me, I don't work</button>
</div>

Logs

System Info

System:
    OS: macOS 15.3
    CPU: (10) arm64 Apple M1 Pro
    Memory: 561.53 MB / 32.00 GB
    Shell: 5.9 - /bin/zsh
  Binaries:
    Node: 22.13.0 - /opt/homebrew/bin/node
    npm: 11.0.0 - /opt/homebrew/bin/npm
    bun: 1.2.2 - ~/.bun/bin/bun
  Browsers:
    Chrome: 133.0.6943.100
    Safari: 18.3
  npmPackages:
    svelte: ^5.20.2 => 5.20.2

Severity

blocking an upgrade

[paoloricciuti]

This is expected and documented

Since svelte 5 used event delegation

[corneliusio]

Ahh, brutal. Really a bummer that the expected behavior of HTML events is being altered here. Especially because in my case stopPropagation isn't even attached to an element within a Svelte component.

[paoloricciuti]

Ahh, brutal. Really a bummer that the expected behavior of HTML events is being altered here. Especially because in my case stopPropagation isn't even attached to an element within a Svelte component.

What's the actual use case? Maybe there's a workaround (or maybe we can provide one)

[corneliusio]

@paoloricciuti I really appreciate that. I have a pretty straightforward workaround that will allow me to upgrade an older project, just means I'll be having to do more manual migration.

<script>
    function onClick() {
        console.log('CLICKED')
    }

    function stopPropagation(el, type) {
        el.addEventListener(type, event => event.stopPropagation())
    }
    
    function click(el, handler) {
        el.addEventListener('click', handler)
    }
</script>

<div use:stopPropagation={'click'}>
    <button use:click={onClick}>Click me, I work.</button>
</div>

[dummdidumm]

I probably want to use on from svelte/events instead, which will also mean you can avoid using actions

[corneliusio]

If I understand correctly, I'd then need to bind the element to a variable and attach the event listener after the component has mounted. I'm not sure I track why this would be a better approach than simply using an action—especially in a situation where the event needs to be attached to elements in a loop.

It may be worth mentioning that I'm in a situation where I never need to worry about the component being unmounted. So I don't have to cleanup the event listeners at any point.

[corneliusio]

For what it's worth, this is where I ultimately landed. Allows me to quickly replace arbitrary event handlers.

<script>
    import { on as addEventListener } from 'svelte/events'

    function onClick() {
        console.log('CLICKED')
    }

    /**
     * @param {HTMLElement} el
     * @param {keyof HTMLElementEventMap} type
     * */
    function stopPropagation(el, type) {
        el.addEventListener(type, event => event.stopPropagation())
    }

    /**
     * @typedef {{ [K in keyof HTMLElementEventMap]: (element: HTMLElement, handler: (event: HTMLElementEventMap[K]) => void) => void}} HTMLElementEventHandlersMap
     * */
    export const on = new Proxy(/** @type {HTMLElementEventHandlersMap} */ ({}), {
        /**
         * @template {keyof HTMLElementEventMap} T
         * @param {T} type
         * */
        get(_target, type) {
            /**
             * @param {HTMLElement} el
             * @param {(event: HTMLElementEventMap[T]) => void} handler
             * */
            return (el, handler) => addEventListener(el, type, handler)
        },
    })
</script>

<div use:stopPropagation={'click'}>
    <button use:on.click={onClick}>Click me, I work.</button>
</div>

[brunnerh]

It can act as a simple replacement for addEventListener that takes delegation into account when calling stopPropagation on the event.

<script>
    import { on } from 'svelte/events';
	
    function onClick() {
        console.log('CLICKED')
    }

    function stopPropagation(el, type) {
        on(el, type, event => event.stopPropagation())
    }
</script>

<div onclick={() => console.log('should log')}>
    <button onclick={onClick}>Click me</button>
</div>

<div onclick={() => console.log('should not log')}>
    <div use:stopPropagation={'click'}>
        <button onclick={onClick}>Click me</button>
    </div>
</div>

Playground

[corneliusio]

@brunnerh Ahhhh. I see—use it where the stopPropagation method is being called. I definitely had that twisted. This may actually work in my situation and would certainly be better than that insane proxy shit I did. 😂

Much appreciated all!