fix: improve event handling compatibility with delegation (#10168)

* fix: improve event handling compatibility with delegation

* fix

* lint

* add test

.changeset/tame-spies-drum.md

@@ -0,0 +1,5 @@
+---
+'svelte': patch
+---
+
+fix: improve event handling compatibility with delegation

packages/svelte/src/internal/client/render.js

@@ -319,7 +319,15 @@ export function event(event_name, dom, handler, capture, passive) {
 		capture,
 		passive
 	};
-	const target_handler = handler;
+	/**
+	 * @this {EventTarget}
+	 */
+	function target_handler(/** @type {Event} */ event) {
+		handle_event_propagation(dom, event);
+		if (!event.cancelBubble) {
+			return handler.call(this, event);
+		}
+	}
 	dom.addEventListener(event_name, target_handler, options);
 	// @ts-ignore
 	if (dom === document.body || dom === window || dom === document) {

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

@@ -0,0 +1,20 @@
+import { flushSync } from 'svelte';
+import { test } from '../../test';
+import { log } from './log.js';
+
+export default test({
+	before_test() {
+		log.length = 0;
+	},
+
+	async test({ assert, target }) {
+		const [b1] = target.querySelectorAll('button');
+
+		flushSync(() => {
+			b1?.click();
+		});
+
+		await Promise.resolve();
+		assert.deepEqual(log, ['clicked button']);
+	}
+});

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

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

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

@@ -0,0 +1,8 @@
+<script>
+	import { log } from './log.js';
+</script>
+<div on:click={(e) => { log.push('clicked div') }}>
+	<button onclick={(e) => { log.push('clicked button'); e.stopPropagation() }}>
+		Button
+	</button>
+</div>

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

@@ -0,0 +1,20 @@
+import { flushSync } from 'svelte';
+import { test } from '../../test';
+import { log } from './log.js';
+
+export default test({
+	before_test() {
+		log.length = 0;
+	},
+
+	async test({ assert, target }) {
+		const [b1] = target.querySelectorAll('button');
+
+		flushSync(() => {
+			b1?.click();
+		});
+
+		await Promise.resolve();
+		assert.deepEqual(log, ['clicked button']);
+	}
+});

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

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

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

@@ -0,0 +1,13 @@
+<script>
+	import { log } from './log.js';
+	const action = () => {}
+</script>
+<div use:action onclick={() => log.push('clicked container')} onkeydown={() => {}}>
+	<div use:action onclick={(e) => { log.push('clicked div 1') }}>
+		<div onclick={(e) => { log.push('clicked div 2') }}>
+			<button onclick={(e) => { log.push('clicked button'); e.stopPropagation() }}>
+				Button
+			</button>
+		</div>
+	</div>
+</div>

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

@@ -0,0 +1,25 @@
+import { flushSync } from 'svelte';
+import { test } from '../../test';
+import { log } from './log.js';
+
+export default test({
+	before_test() {
+		log.length = 0;
+	},
+
+	async test({ assert, target }) {
+		const [b1] = target.querySelectorAll('button');
+
+		flushSync(() => {
+			b1?.click();
+		});
+
+		await Promise.resolve();
+		assert.deepEqual(log, [
+			'clicked button',
+			'clicked div 2',
+			'clicked div 1',
+			'clicked container'
+		]);
+	}
+});

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

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

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

@@ -0,0 +1,13 @@
+<script>
+	import { log } from './log.js';
+	const action = () => {}
+</script>
+<div use:action onclick={() => log.push('clicked container')} onkeydown={() => {}}>
+	<div use:action onclick={(e) => { log.push('clicked div 1') }}>
+		<div onclick={(e) => { log.push('clicked div 2') }}>
+			<button onclick={(e) => { log.push('clicked button') }}>
+				Button
+			</button>
+		</div>
+	</div>
+</div>