Actions pratiche: clickOutside tooltip autofocus
Costruisca actions riutilizzabili per scenari UI comuni e realistici.
Actions pratiche: clickOutside tooltip autofocus è una lezione Sveltejs Academy gratuita su CoddyKit. Questa è la lezione 4 di 4. Puoi leggere la lezione completa qui gratuitamente — poi esercitati direttamente nel browser con un editor di codice integrato e un tutor IA disponibile 24/7. Fa parte del percorso di apprendimento Sveltejs Academy, e i tuoi progressi si sincronizzano tra il web e l'app CoddyKit. Il corso Sveltejs Academy include 4 lezioni in totale.
Action clickOutside
Rilevi i clic all'esterno di un elemento per chiudere menu e menu a discesa.
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); } };
}Utilizzare clickOutside
Passi un callback che viene eseguito quando l'utente fa clic all'esterno.
<div use:clickOutside={() => open = false}>Action autofocus
Porti un elemento in primo piano al momento del montaggio: è più semplice di combinare bind:this e onMount.
function autofocus(node) { node.focus(); }Utilizzare autofocus
La applichi agli input o a qualsiasi elemento che possa ricevere il focus.
<input use:autofocus />Action tooltip
Mostri un tooltip al passaggio del mouse. Incapsuli listener e creazione del DOM in un'unica action.
Action lazyLoad
Combini IntersectionObserver con use: per caricare le immagini in modo differito.
Action clickConfirm
Richieda due clic entro un determinato intervallo per confermare le operazioni distruttive.
Riutilizzare tra i componenti
Una volta scritta, un'action funziona su qualsiasi elemento compatibile. Le memorizzi in $lib/actions.
Librerie di action
Pacchetti come svelte-use includono decine di action predefinite.
Comporre le action
Applichi più action allo stesso elemento: use:autofocus use:clickOutside={close}.
Buona pratica
Mantenga ogni action focalizzata su un solo comportamento. Le componga per ottenere effetti più ricchi.
Verifica rapida
Di che cosa ha bisogno un'action clickOutside?
Riepilogo
Action pratiche come clickOutside, autofocus e tooltip mostrano come incapsulare comportamenti del DOM riutilizzabili.
Domande Frequenti
La lezione «Actions pratiche: clickOutside tooltip autofocus» è gratuita?
Sì — il testo completo di «Actions pratiche: clickOutside tooltip autofocus» è gratuito qui sul web. Per esercitarvi in modo interattivo (un editor di codice integrato e un tutor IA 24/7) e sbloccare il resto del corso Sveltejs Academy, passa a CoddyKit PRO. Il corso Sveltejs Academy include 4 lezioni in totale.
Cosa imparerò in «Actions pratiche: clickOutside tooltip autofocus»?
Costruisca actions riutilizzabili per scenari UI comuni e realistici. Eserciti Sveltejs Academy con codice pratico che esegui direttamente nel browser, e un tutor IA 24/7 risponde alle tue domande mentre lavori sulla lezione.
Ho bisogno di esperienza per iniziare Sveltejs Academy?
Non è richiesta alcuna esperienza precedente. Sveltejs Academy su CoddyKit è strutturato per principianti e studenti avanzati, quindi puoi iniziare da qui o dall'inizio e procedere al tuo ritmo. Questa è la lezione 4 di 4.
Quanto tempo richiede la lezione «Actions pratiche: clickOutside tooltip autofocus»?
La maggior parte delle lezioni CoddyKit richiede circa 5–10 minuti. Ogni lezione è breve e interattiva, quindi fai progressi costanti e riprendi esattamente da dove hai lasciato su web e app.
Posso scrivere ed eseguire codice in questa lezione Sveltejs Academy?
Sì. Ogni lezione Sveltejs Academy include un editor di codice integrato, quindi scrivi ed esegui codice reale direttamente nel tuo browser e ricevi feedback istantaneo dall'IA — nessuna configurazione locale necessaria.
Tutte le lezioni di questo corso
- Sintassi della direttiva use:
- Parametri e aggiornamenti delle actions
- La funzione di pulizia destroy()
- Actions pratiche: clickOutside tooltip autofocus