Praktische actions: clickOutside tooltip autofocus
Bouw herbruikbare actions voor veelvoorkomende UI-patronen uit de praktijk.
Praktische actions: clickOutside tooltip autofocus is een gratis Sveltejs Academy-les op CoddyKit. Dit is les 4 van 4. Je kunt de volledige les hieronder gratis lezen en daarna in de browser praktisch oefenen met een ingebouwde code-editor en een AI-begeleider die 24/7 beschikbaar is. Deze les maakt deel uit van het leertraject Sveltejs Academy. Je voortgang wordt gesynchroniseerd op het web en in de CoddyKit-app. De cursus Sveltejs Academy bevat in totaal 4 lessen.
clickOutside-actie
Detecteer klikken buiten een element om menu's en vervolgkeuzemenu's te sluiten.
function clickOutside(node, cb) {
function handler(e) { if (!node.contains(e.target)) cb(); }
document.addEventListener("click", handler, true);
return { destroy() { document.removeEventListener("click", handler, true); } };
}clickOutside gebruiken
Geef een terugbelfunctie door die wordt uitgevoerd wanneer de gebruiker buiten het element klikt.
<div use:clickOutside={() => open = false}>autofocus-actie
Geef een element focus wanneer het wordt toegevoegd; dat is schoner dan bind:this in combinatie met onMount.
function autofocus(node) { node.focus(); }autofocus gebruiken
Pas dit toe op invoervelden of elk ander element dat focus kan krijgen.
<input use:autofocus />tooltip-actie
Toon een hulptekst wanneer je over een element beweegt. Verwerk luisteraars en het maken van DOM-elementen in één actie.
lazyLoad-actie
Combineer IntersectionObserver met use: om afbeeldingen pas te laden wanneer dat nodig is.
clickConfirm-actie
Vraag om twee klikken binnen een tijdvenster om destructieve bewerkingen te bevestigen.
Opnieuw gebruiken in componenten
Een actie werkt na het schrijven ervan op elk compatibel element. Sla acties op in $lib/actions.
Actiebibliotheken
Pakketten zoals svelte-use leveren tientallen kant-en-klare acties.
Acties combineren
Pas meerdere acties toe op één element: use:autofocus use:clickOutside={close}.
Beste werkwijze
Houd acties gericht op één gedrag. Combineer ze voor uitgebreidere effecten.
Korte controle
Wat heeft een clickOutside-actie nodig?
Samenvatting
Praktische acties zoals clickOutside, autofocus en tooltip laten zien hoe je herbruikbaar DOM-gedrag kunt inkapselen.
Leer HTML met een AI-tutor — gratis
Schrijf echte code en voer die uit in je browser, krijg direct hulp van een AI-tutor die 24/7 beschikbaar is en ga verder waar je gebleven bent op het web of in de app.
- Cursussen
- 41
- Lessen
- 163
Veelgestelde vragen
Is de les “Praktische actions: clickOutside tooltip autofocus” gratis?
Ja — de volledige tekst van “Praktische actions: clickOutside tooltip autofocus” kun je hier gratis op het web lezen. Als je interactief wilt oefenen met een ingebouwde code-editor en een AI-begeleider die 24/7 beschikbaar is, en de rest van de cursus Sveltejs Academy wilt ontgrendelen, kun je upgraden naar CoddyKit PRO. De cursus Sveltejs Academy bevat in totaal 4 lessen.
Wat leer ik in “Praktische actions: clickOutside tooltip autofocus”?
Bouw herbruikbare actions voor veelvoorkomende UI-patronen uit de praktijk. Je oefent met Sveltejs Academy door code rechtstreeks in de browser uit te voeren. Een AI-begeleider die 24/7 beschikbaar is beantwoordt je vragen terwijl je de les doorwerkt.
Heb ik ervaring nodig om met Sveltejs Academy te beginnen?
Ervaring vooraf is niet nodig. Sveltejs Academy op CoddyKit is opgebouwd voor beginners tot gevorderden, zodat je hier of bij het begin kunt starten en in je eigen tempo kunt leren. Dit is les 4 van 4.
Hoe lang duurt de les “Praktische actions: clickOutside tooltip autofocus”?
De meeste lessen van CoddyKit duren ongeveer 5–10 minuten. Elke les is kort en interactief, zodat je gestaag vooruitgaat en op het web en in de app precies verdergaat waar je was gebleven.
Kan ik code schrijven en uitvoeren in deze les over Sveltejs Academy?
Ja. Elke les over Sveltejs Academy bevat een ingebouwde code-editor, zodat je rechtstreeks in je browser echte code kunt schrijven en uitvoeren en direct feedback van AI krijgt — lokale installatie is niet nodig.
Alle lessen in deze cursus
- Syntaxis van de use:-directive
- Actionparameters en updates
- De destroy()-opruimfunctie
- Praktische actions: clickOutside tooltip autofocus