Closed
Description
Describe the bug
If you have an event callback passed to a parent element. it will be called multiple times depending on how many events were added to its child with the on function.
Reproduction
let's say we have the structure below:
+page.svelte
<script lang="ts">
import { on } from "svelte/events";
function handleParentKeyDown(e: KeyboardEvent) {
console.log("parent keydown");
}
function keydownOne(node: HTMLButtonElement) {
on(node, "keydown", (e) => {});
}
function keydownTwo(node: HTMLButtonElement) {
on(node, "keydown", (e) => {});
}
function keydownThree(node: HTMLButtonElement) {
on(node, "keydown", (e) => {});
}
</script>
<div onkeydown={handleParentKeyDown}>
<button use:keydownOne use:keydownTwo use:keydownThree>button</button>
</div>
The handleParentKeyDown is supposed to only get called once when a key is pressed on the child button as a result of bubbling but here it is called three times; one for each "on" function used.
Logs
No response
System Info
System:
OS: Windows 11 10.0.22631
CPU: (16) x64 12th Gen Intel(R) Core(TM) i7-12650H
Memory: 4.19 GB / 15.63 GB
Binaries:
Node: 20.12.2 - C:\Program Files\nodejs\node.EXE
npm: 10.5.0 - C:\Program Files\nodejs\npm.CMD
bun: 1.1.3 - ~\.bun\bin\bun.EXE
Browsers:
Edge: Chromium (125.0.2535.92)
Internet Explorer: 11.0.22621.3527
npmPackages:
svelte: ^5.0.0-next.154 => 5.0.0-next.154
Severity
blocking an upgrade