sveltejs
diff --git a/‎.changeset/thin-dolls-cover.md
Copy file name to clipboard
+5Lines changed: 5 additions & 0 deletions b/‎.changeset/thin-dolls-cover.md
Copy file name to clipboard
+5Lines changed: 5 additions & 0 deletions
diff --git a/‎packages/svelte/src/internal/client/dom/elements/events.js
Copy file name to clipboardExpand all lines: packages/svelte/src/internal/client/dom/elements/events.js
+9-2Lines changed: 9 additions & 2 deletions b/‎packages/svelte/src/internal/client/dom/elements/events.js
Copy file name to clipboardExpand all lines: packages/svelte/src/internal/client/dom/elements/events.js
+9-2Lines changed: 9 additions & 2 deletions
diff --git a/‎packages/svelte/tests/runtime-runes/samples/event-media-element-cleanup/_config.js
Copy file name to clipboard
+20Lines changed: 20 additions & 0 deletions b/‎packages/svelte/tests/runtime-runes/samples/event-media-element-cleanup/_config.js
Copy file name to clipboard
+20Lines changed: 20 additions & 0 deletions
diff --git a/‎packages/svelte/tests/runtime-runes/samples/event-media-element-cleanup/main.svelte
Copy file name to clipboard
+9Lines changed: 9 additions & 0 deletions b/‎packages/svelte/tests/runtime-runes/samples/event-media-element-cleanup/main.svelte
Copy file name to clipboard
+9Lines changed: 9 additions & 0 deletions
@@ -0,0 +1,5 @@
+---
+'svelte': patch
+---
+
+fix: cleanup event handlers on media elements
@@ -112,8 +112,15 @@ export function event(event_name, dom, handler, capture, passive) {
 	var options = { capture, passive };
 	var target_handler = create_event(event_name, dom, handler, options);
 
-	// @ts-ignore
-	if (dom === document.body || dom === window || dom === document) {
+	if (
+		dom === document.body ||
+		// @ts-ignore
+		dom === window ||
+		// @ts-ignore
+		dom === document ||
+		// Firefox has quirky behavior, it can happen that we still get "canplay" events when the element is already removed
+		dom instanceof HTMLMediaElement
+	) {
 		teardown(() => {
 			dom.removeEventListener(event_name, target_handler, options);
 		});
 
@@ -0,0 +1,20 @@
+import { flushSync } from 'svelte';
+import { test } from '../../test';
+import { expect, vi } from 'vitest';
+
+const handler = vi.fn();
+
+export default test({
+	props: {
+		handler
+	},
+	async test({ target }) {
+		const button = target.querySelector('button');
+		const video = target.querySelector('video');
+
+		button?.click();
+		flushSync();
+		video?.dispatchEvent(new Event('someevent'));
+		expect(handler).not.toHaveBeenCalled();
+	}
+});
@@ -0,0 +1,9 @@
+<script>
+	const { handler } = $props();
+	let show = $state(true);
+</script>
+
+<button onclick={() => show = false}>show/hide</button>
+{#if show}
+	<video onsomeevent={handler}></video>
+{/if}