javascript / intermediate
Snippet
Wiederverwendbare DOM-Logik mit Svelte Actions
Actions sind Funktionen, die aufgerufen werden, wenn ein Element erstellt wird. Sie eignen sich hervorragend für die Integration von Drittanbieter-Bibliotheken oder die Handhabung globaler Ereignisse, wie z.B. das Klicken außerhalb eines Modals.
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('click_outside'));}};document.addEventListener('click', handleClick, true);return {destroy() {document.removeEventListener('click', handleClick, true);}};}
svelte
Erklärung
1
export function clickOutside(node) { ... }
Definiert eine Funktion, die den DOM-Knoten als erstes Argument erhält.
2
return { destroy() { ... } };
Gibt ein Objekt mit einer 'destroy'-Methode zurück, um Event-Listener zu entfernen, wenn das Element gelöscht wird.