fix: ensure event delegation stops after an error

When a delegated event handler throws an error, ensure that delegated event handlers above it don't run.
Strictly speaking this is different from attaching multiple separate event listeners because those above would still run, but it's impossible for us to simulate this behavior here.
Fixes #8403

Author: dummdidumm

.changeset/calm-taxis-promise.md

@@ -0,0 +1,5 @@
+---
+"svelte": patch
+---
+
+fix: ensure event delegation stops after an error

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

@@ -131,11 +131,19 @@ export function handle_event_propagation(handler_element, event) {
 		var delegated = current_target[internal_prop_name];
 
 		if (delegated !== undefined && !(/** @type {any} */ (current_target).disabled)) {
-			if (is_array(delegated)) {
-				var [fn, ...data] = delegated;
-				fn.apply(current_target, [event, ...data]);
-			} else {
-				delegated.call(current_target, event);
+			try {
+				if (is_array(delegated)) {
+					var [fn, ...data] = delegated;
+					fn.apply(current_target, [event, ...data]);
+				} else {
+					delegated.call(current_target, event);
+				}
+			} catch (e) {
+				// @ts-expect-error ensure we don't run other handlers. Strictly speaking this is different
+				// from attaching multiple separate event listeners because those above would still run,
+				// but it's impossible for us to simulate this behavior here.
+				event.__root = document;
+				throw e;
 			}
 		}
 

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

@@ -0,0 +1,11 @@
+import { test } from '../../test';
+
+export default test({
+	async test({ assert, target }) {
+		const btn = target.querySelector('button');
+
+		await btn?.click();
+		assert.htmlEqual(target.innerHTML, `<div><button>1</button></div>`);
+	},
+	runtime_error: 'nope'
+});

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

@@ -0,0 +1,19 @@
+<script>
+	let count = $state(0);
+
+	function yep() {
+		count++;
+	}
+
+	function nope() {
+		count++;
+		throw new Error('nope');
+	}
+</script>
+
+<div onclick={yep}>
+	<button onclick={nope}>
+		{count}
+	</button>
+</div>
+