fix: ensure capture events don't call delegated events (#10831)

fixes #10821

.changeset/ten-eels-move.md

@@ -0,0 +1,5 @@
+---
+"svelte": patch
+---
+
+fix: ensure capture events don't call delegated events

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

@@ -17,7 +17,10 @@ export function event(event_name, dom, handler, capture, passive) {
 	 * @this {EventTarget}
 	 */
 	function target_handler(/** @type {Event} */ event) {
-		handle_event_propagation(dom, event);
+		if (!capture) {
+			// Only call in the bubble phase, else delegated events would be called before the capturing events
+			handle_event_propagation(dom, event);
+		}
 		if (!event.cancelBubble) {
 			return handler.call(this, event);
 		}

packages/svelte/tests/runtime-runes/samples/event-attribute-delegation-7/_config.js

@@ -0,0 +1,16 @@
+import { test } from '../../test';
+import { log } from './log.js';
+
+export default test({
+	before_test() {
+		log.length = 0;
+	},
+
+	async test({ assert, target }) {
+		const btn = target.querySelector('button');
+
+		btn?.click();
+		await Promise.resolve();
+		assert.deepEqual(log, ['div onclickcapture', 'button onclick']);
+	}
+});

packages/svelte/tests/runtime-runes/samples/event-attribute-delegation-7/log.js

@@ -0,0 +1,2 @@
+/** @type {any[]} */
+export const log = [];

packages/svelte/tests/runtime-runes/samples/event-attribute-delegation-7/main.svelte

@@ -0,0 +1,7 @@
+<script>
+	import { log } from "./log";
+</script>
+
+<div onclickcapture={() => log.push('div onclickcapture')}>
+	<button onclick={() => log.push('button onclick')}>main</button>
+</div>