fix: address event delegation duplication behaviour (#12014)

.changeset/cyan-news-grow.md

@@ -0,0 +1,5 @@
+---
+"svelte": patch
+---
+
+fix: address event delegation duplication behaviour

packages/svelte/src/internal/client/dom/elements/events.js

@@ -42,7 +42,7 @@ export function create_event(event_name, dom, handler, options) {
 	 * @this {EventTarget}
 	 */
 	function target_handler(/** @type {Event} */ event) {
-		if (!options.capture) {
+		if (!options.capture && /** @type {Event & {__root: any}} */ (event).__root === undefined) {
 			// Only call in the bubble phase, else delegated events would be called before the capturing events
 			handle_event_propagation(dom, event);
 		}

packages/svelte/tests/runtime-runes/samples/event-on-2/_config.js

@@ -0,0 +1,16 @@
+import { flushSync } from 'svelte';
+import { test } from '../../test';
+
+export default test({
+	mode: ['client'],
+
+	test({ assert, target, logs }) {
+		const [b1] = target.querySelectorAll('button');
+
+		const keydown = new window.KeyboardEvent('keydown', { bubbles: true });
+
+		b1?.dispatchEvent(keydown);
+		flushSync();
+		assert.deepEqual(logs, ['parent keydown']);
+	}
+});

packages/svelte/tests/runtime-runes/samples/event-on-2/main.svelte

@@ -0,0 +1,20 @@
+<script>
+  import { on } from "svelte/events";
+
+  function handleParentKeyDown() {
+    console.log("parent keydown");
+  }
+  function keydownOne(node) {
+    on(node, "keydown", (e) => {});
+  }
+  function keydownTwo(node) {
+    on(node, "keydown", (e) => {});
+  }
+  function keydownThree(node) {
+    on(node, "keydown", (e) => {});
+  }
+</script>
+
+<div onkeydown={handleParentKeyDown}>
+  <button use:keydownOne use:keydownTwo use:keydownThree>button</button>
+</div>