Praxisnahe Actions: clickOutside tooltip autofocus
Erstellen Sie wiederverwendbare Actions für gängige UI-Muster aus der Praxis.
Praxisnahe Actions: clickOutside tooltip autofocus ist eine kostenlose Sveltejs Academy-Lektion auf CoddyKit. Dies ist Lektion 4 von 4. Du kannst die komplette Lektion unten kostenlos lesen – dann übst du sie direkt im Browser mit einem integrierten Code-Editor und einem KI-Tutor rund um die Uhr. Sie ist Teil des Sveltejs Academy-Lernpfads, und dein Fortschritt wird über Web und CoddyKit-App synchronisiert. Der Sveltejs Academy-Kurs umfasst insgesamt 4 Lektionen.
clickOutside-Action
Erkennen Sie Klicks außerhalb eines Elements, um Menüs und Dropdowns zu schließen.
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 verwenden
Übergeben Sie einen Callback, der ausgeführt wird, wenn die Benutzerin oder der Benutzer außerhalb klickt.
<div use:clickOutside={() => open = false}>autofocus-Action
Fokussieren Sie ein Element beim Mounten – übersichtlicher als bind:this plus onMount.
function autofocus(node) { node.focus(); }autofocus verwenden
Wenden Sie die Action auf Inputs oder jedes andere fokussierbare Element an.
<input use:autofocus />tooltip-Action
Zeigen Sie beim Überfahren mit dem Mauszeiger einen Tooltip an. Kapseln Sie Listener und die DOM-Erstellung in einer einzigen Action.
lazyLoad-Action
Kombinieren Sie IntersectionObserver mit use:, um Bilder verzögert zu laden.
clickConfirm-Action
Fordern Sie innerhalb eines bestimmten Zeitfensters zwei Klicks an, um destruktive Vorgänge zu bestätigen.
Über mehrere Komponenten wiederverwenden
Nach dem Schreiben funktioniert eine Action mit jedem kompatiblen Element. Speichern Sie Actions in $lib/actions.
Action-Bibliotheken
Pakete wie svelte-use liefern Dutzende vorgefertigte Actions.
Actions kombinieren
Wenden Sie mehrere Actions auf ein Element an: use:autofocus use:clickOutside={close}.
Bewährte Vorgehensweise
Beschränken Sie Actions auf jeweils ein Verhalten. Kombinieren Sie sie für umfangreichere Effekte.
Kurzer Test
Was benötigt eine clickOutside-Action?
Zusammenfassung
Praktische Actions wie clickOutside, autofocus und tooltip zeigen, wie sich wiederverwendbare DOM-Verhaltensweisen kapseln lassen.
Häufig gestellte Fragen
Ist die Lektion „Praxisnahe Actions: clickOutside tooltip autofocus“ kostenlos?
Ja — der vollständige Text von „Praxisnahe Actions: clickOutside tooltip autofocus“ ist hier im Web kostenlos zu lesen. Um sie interaktiv zu üben (integrierter Code-Editor und 24/7 KI-Tutor) und den Rest des Sveltejs Academy-Kurses freizuschalten, upgrade auf CoddyKit PRO. Der Sveltejs Academy-Kurs umfasst insgesamt 4 Lektionen.
Was lerne ich in „Praxisnahe Actions: clickOutside tooltip autofocus“?
Erstellen Sie wiederverwendbare Actions für gängige UI-Muster aus der Praxis. Du übst Sveltejs Academy mit praktischem Code, den du direkt im Browser ausführst, und ein 24/7 KI-Tutor beantwortet deine Fragen während du die Lektion bearbeitest.
Brauche ich Erfahrung, um Sveltejs Academy zu starten?
Keine Vorkenntnisse erforderlich. Sveltejs Academy auf CoddyKit ist für Anfänger bis fortgeschrittene Lernende strukturiert, sodass du hier starten oder von Anfang an beginnen und in deinem eigenen Tempo voranschreiten kannst. Dies ist Lektion 4 von 4.
Wie lange dauert die Lektion „Praxisnahe Actions: clickOutside tooltip autofocus“?
Die meisten CoddyKit-Lektionen dauern etwa 5–10 Minuten. Jede ist kompakt und interaktiv, sodass du stetig Fortschritte machst und genau dort weitermachst, wo du aufgehört hast – im Web und in der App.
Kann ich in dieser Sveltejs Academy-Lektion Code schreiben und ausführen?
Ja. Jede Sveltejs Academy-Lektion enthält einen integrierten Code-Editor, sodass du echten Code direkt in deinem Browser schreibst und ausführst und sofort KI-Feedback erhältst — ohne lokale Einrichtung erforderlich.
Alle Lektionen in diesem Kurs
- Syntax der use:-Direktive
- Action-Parameter und Aktualisierungen
- Die destroy()-Aufräumfunktion
- Praxisnahe Actions: clickOutside tooltip autofocus