javascript / expert
Snippet
Wiederverwendbare Interaktionslogik mit Svelte Actions
Svelte Actions sind Funktionen, die aufgerufen werden, wenn ein Element erstellt wird. Sie eignen sich hervorragend für die direkte Interaktion mit dem DOM, wie z. B. das Abfangen von Klicks außerhalb eines Modals. Die destroy-Methode des Rückgabeobjekts stellt die korrekte Bereinigung sicher.
snippet.js
javascript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
export function clickOutside(node, handler) {const handleClick = (event) => {if (node && !node.contains(event.target) && !event.defaultPrevented) {handler();}};document.addEventListener('click', handleClick, true);return {destroy() {document.removeEventListener('click', handleClick, true);}};}// Usage: <div use:clickOutside={() => (show = false)}>
svelte
Erklärung
1
export function clickOutside(node, handler)
Definiert die Action, die das Zielelement (node) und eine Callback-Funktion (handler) entgegennimmt.
2
if (node && !node.contains(event.target))
Prüft, ob das geklickte Ziel weder das Element selbst noch eines seiner Kinder ist.
3
destroy() { ... }
Bereinigung des Lebenszyklus, die Speicherlecks verhindert, indem der globale Event-Listener entfernt wird.