Praktiske actions: clickOutside tooltip autofocus
Byg genanvendelige actions til almindelige UI-mønstre fra virkeligheden
Praktiske actions: clickOutside tooltip autofocus er en gratis Sveltejs Academy-lektion på CoddyKit. Dette er lektion 4 af 4. Du kan læse hele lektionen gratis nedenfor — og derefter øve dig praktisk i browseren med en indbygget kodeeditor og en AI-vejleder, der er tilgængelig døgnet rundt. Den er en del af læringsforløbet i Sveltejs Academy, og dine fremskridt synkroniseres på tværs af nettet og CoddyKit-appen. Sveltejs Academy-kurset indeholder 4 lektioner i alt.
clickOutside-handling
Registrér klik uden for et element for at lukke menuer og rullemenuer.
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); } };
}Brug clickOutside
Overfør et tilbagekald, der køres, når du klikker uden for elementet.
<div use:clickOutside={() => open = false}>autofocus-handling
Sæt fokus på et element ved montering; det er renere end bind:this + onMount.
function autofocus(node) { node.focus(); }Brug autofocus
Anvend den på inputfelter eller et hvilket som helst element, der kan få fokus.
<input use:autofocus />tooltip-handling
Vis et værktøjstip, når markøren holdes over elementet. Indkapsl lyttere og oprettelse af DOM i én handling.
lazyLoad-handling
Kombinér IntersectionObserver med use: for at indlæse billeder efter behov.
clickConfirm-handling
Kræv to klik inden for et tidsvindue for at bekræfte destruktive handlinger.
Genbrug på tværs af komponenter
Når en handling er skrevet, fungerer den på alle kompatible elementer. Gem dem i $lib/actions.
Handlingsbiblioteker
Pakker som svelte-use leveres med dusinvis af færdigbyggede handlinger.
Sammensæt handlinger
Anvend flere handlinger på ét element: use:autofocus use:clickOutside={close}.
Bedste praksis
Hold handlinger fokuseret på én adfærd. Sammensæt dem for mere avancerede effekter.
Hurtigt tjek
Hvad har en clickOutside-handling brug for?
Opsummering
Praktiske handlinger som clickOutside, autofocus og tooltip viser, hvordan genanvendelig DOM-adfærd kan indkapsles.
Lær HTML med en AI-underviser — gratis
Skriv og kør rigtig kode i din browser, få øjeblikkelig hjælp fra en AI-underviser døgnet rundt, og fortsæt, hvor du slap, på web eller i appen.
- Kurser
- 41
- Lektioner
- 163
Ofte stillede spørgsmål
Er lektionen “Praktiske actions: clickOutside tooltip autofocus” gratis?
Ja — hele teksten til “Praktiske actions: clickOutside tooltip autofocus” kan læses gratis her på nettet. Hvis du vil øve dig interaktivt med en indbygget kodeeditor og en AI-vejleder døgnet rundt og få adgang til resten af Sveltejs Academy-kurset, skal du opgradere til CoddyKit PRO. Sveltejs Academy-kurset indeholder 4 lektioner i alt.
Hvad lærer jeg i “Praktiske actions: clickOutside tooltip autofocus”?
Byg genanvendelige actions til almindelige UI-mønstre fra virkeligheden Du øver dig i Sveltejs Academy med praktisk kode, som du kører direkte i browseren, og en AI-vejleder døgnet rundt besvarer dine spørgsmål, mens du arbejder dig gennem lektionen.
Skal jeg have erfaring for at begynde på Sveltejs Academy?
Der kræves ingen tidligere erfaring. Sveltejs Academy på CoddyKit er tilrettelagt for både begyndere og øvede, så du kan starte her eller fra begyndelsen og lære i dit eget tempo. Dette er lektion 4 af 4.
Hvor lang tid tager lektionen “Praktiske actions: clickOutside tooltip autofocus”?
De fleste CoddyKit-lektioner tager cirka 5–10 minutter. Hver lektion er kort og interaktiv, så du gør løbende fremskridt og kan fortsætte, hvor du slap – på både web og app.
Kan jeg skrive og køre kode i denne Sveltejs Academy-lektion?
Ja. Alle Sveltejs Academy-lektioner har en indbygget kodeeditor, så du kan skrive og køre rigtig kode direkte i din browser og få øjeblikkelig feedback fra AI – uden lokal opsætning.
Alle lektioner i dette kursus
- Syntaks for use:-direktivet
- Action-parametre og opdateringer
- destroy()-oprydningsfunktionen
- Praktiske actions: clickOutside tooltip autofocus