javascript / expert
Snippet
Eigene DOM-Interaktionen über Svelte Actions
Actions sind Lebenszyklus-Funktionen auf Elementebene. Sie eignen sich hervorragend zur Integration von Drittanbieter-Bibliotheken oder zur Handhabung komplexer DOM-Ereignisse, wie z.B. 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
export function clickOutside(node, onEvent) {const handleClick = (e) => {if (node && !node.contains(e.target)) onEvent();};document.addEventListener('click', handleClick);return { destroy: () => document.removeEventListener('click', handleClick) };}<div use:clickOutside={() => console.log('Closed')}>Content</div>
svelte
Erklärung
1
export function clickOutside(node, onEvent)
Eine Standard-JS-Funktion, die den DOM-Knoten und einen benutzerdefinierten Handler erhält.
2
return { destroy: ... }
Gewährleistet eine ordnungsgemäße Bereinigung, um Speicherlecks zu verhindern, wenn das Element aus dem DOM entfernt wird.
3
use:clickOutside={...}
Die Direktive, die die Logik an ein spezifisches HTML-Element bindet.