fix: cancel deferred event listener attachment (#18749)

Fixes #18748

.changeset/calm-events-cleanup.md

@@ -0,0 +1,5 @@
+---
+'svelte': patch
+---
+
+fix: cancel deferred event listeners during cleanup

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

@@ -78,8 +78,11 @@ export function create_event(event_name, dom, handler, options = {}) {
 		event_name.startsWith('touch') ||
 		event_name === 'wheel'
 	) {
+		target_handler.__removed = false;
 		queue_micro_task(() => {
-			dom.addEventListener(event_name, target_handler, options);
+			if (!target_handler.__removed) {
+				dom.addEventListener(event_name, target_handler, options);
+			}
 		});
 	} else {
 		dom.addEventListener(event_name, target_handler, options);
@@ -102,6 +105,7 @@ export function on(element, type, handler, options = {}) {
 	var target_handler = create_event(type, element, handler, options);
 
 	return () => {
+		target_handler.__removed = true;
 		element.removeEventListener(type, target_handler, options);
 	};
 }
@@ -128,6 +132,7 @@ export function event(event_name, dom, handler, capture, passive) {
 		dom instanceof HTMLMediaElement
 	) {
 		teardown(() => {
+			target_handler.__removed = true;
 			dom.removeEventListener(event_name, target_handler, options);
 		});
 	}

packages/svelte/tests/runtime-runes/samples/event-cleanup-before-attachment/Child.svelte

@@ -0,0 +1 @@
+<svelte:document onpointerdown={() => console.log('template')} />

packages/svelte/tests/runtime-runes/samples/event-cleanup-before-attachment/_config.js

@@ -0,0 +1,8 @@
+import { test } from '../../test';
+
+export default test({
+	async test({ assert, logs }) {
+		await new Promise((resolve) => setTimeout(resolve));
+		assert.deepEqual(logs, []);
+	}
+});

packages/svelte/tests/runtime-runes/samples/event-cleanup-before-attachment/main.svelte

@@ -0,0 +1,21 @@
+<script>
+	import { mount, onMount, unmount } from 'svelte';
+	import { on } from 'svelte/events';
+	import Child from './Child.svelte';
+
+	let target;
+
+	onMount(async () => {
+		const off = on(document, 'wheel', () => console.log('on'));
+		off();
+
+		const child = mount(Child, { target });
+		unmount(child);
+
+		await Promise.resolve();
+		document.dispatchEvent(new Event('wheel'));
+		document.dispatchEvent(new Event('pointerdown'));
+	});
+</script>
+
+<div bind:this={target}></div>