fix: cleanup event handlers on media elements (#16005)

Co-authored-by: 7nik <[email protected]>
Co-authored-by: Simon H <[email protected]>

Author: 7nik

.changeset/thin-dolls-cover.md

@@ -0,0 +1,5 @@
+---
+'svelte': patch
+---
+
+fix: cleanup event handlers on media elements

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

@@ -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);
 		});

packages/svelte/tests/runtime-runes/samples/event-media-element-cleanup/_config.js

@@ -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();
+	}
+});

packages/svelte/tests/runtime-runes/samples/event-media-element-cleanup/main.svelte

@@ -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}