javascript / intermediate
Snippet
Logik auf Elementebene mit Svelte-Aktionen
Svelte Actions sind Funktionen, mit denen Sie benutzerdefinierte Logik an den Lebenszyklus eines DOM-Elements binden können. Sie sind ideal für wiederverwendbare Verhaltensweisen, wie das Erkennen von Klicks außerhalb eines Elements für Modale oder Dropdowns.
snippet.js
javascript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
export function clickOutside(node) {const handleClick = (event) => {if (node && !node.contains(event.target) && !event.defaultPrevented) {node.dispatchEvent(new CustomEvent('outclick'));}};document.addEventListener('click', handleClick, true);return {destroy() {document.removeEventListener('click', handleClick, true);}};}
svelte
Erklärung
1
export function clickOutside(node) {
Die Funktion erhält den tatsächlichen DOM-Knoten, wenn das Element erstellt wird.
2
node.dispatchEvent(new CustomEvent('outclick'));
Erstellt und versendet ein benutzerdefiniertes Event, das mit on:outclick abgefangen werden kann.
3
destroy() { ... }
Svelte ruft diese Cleanup-Funktion automatisch auf, wenn das Element aus dem DOM entfernt wird.