Eventmodifikatorer: preventDefault stopPropagation once
Brug pipe-adskilte modifikatorer til at ændre eventadfærd uden ekstra kode
Eventmodifikatorer: preventDefault stopPropagation once er en gratis Sveltejs Academy-lektion på CoddyKit. Dette er lektion 2 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.
Modifikatorsyntaks
Tilføj modifikatorer til hændelsesnavnet med en lodret streg.
<form on:submit|preventDefault={save}>preventDefault
Kalder event.preventDefault(), før din håndtering kører. Du behøver ikke gøre det manuelt.
stopPropagation
Kalder event.stopPropagation() for at forhindre, at hændelsen bobler op.
<div on:click|stopPropagation={inner}>once
Håndteringen fjernes efter det første kald. Nyttigt til hændelser, der kun skal opsættes én gang.
<button on:click|once={track}>Buy</button>passive
Markerer lytteren som passiv og signalerer til browseren, at den ikke kalder preventDefault. Forbedrer rulleydelsen.
<div on:touchstart|passive={start}>capture
Kører håndteringen under capture-fasen i stedet for bubble-fasen.
self
Udløses kun, når hændelsens mål er selve elementet og ikke et underordnet element.
<div on:click|self={close}>nonpassive
Tvinger en hændelse, der som standard er passiv, til at være ikke-passiv, så du kan kalde preventDefault på den.
trusted
Udløses kun for hændelser, der er udløst af brugerinput, ikke af et script.
Kombinér modifikatorer
Kæd flere modifikatorer sammen med lodrette streger.
<a on:click|preventDefault|stopPropagation={go}>Click</a>Hvorfor bruge modifikatorer
De holder håndteringer fokuseret på forretningslogik og fjerner standardkode.
Hurtigt tjek
Hvad gør |once?
Opsummering
Modifikatorer som preventDefault, stopPropagation, once og passive forenkler almindelige ændringer af hændelser.
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 “Eventmodifikatorer: preventDefault stopPropagation once” gratis?
Ja — hele teksten til “Eventmodifikatorer: preventDefault stopPropagation once” 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 “Eventmodifikatorer: preventDefault stopPropagation once”?
Brug pipe-adskilte modifikatorer til at ændre eventadfærd uden ekstra kode 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 2 af 4.
Hvor lang tid tager lektionen “Eventmodifikatorer: preventDefault stopPropagation once”?
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
- on:click on:input on:submit
- Eventmodifikatorer: preventDefault stopPropagation once
- Brugerdefinerede events med createEventDispatcher
- Videresend events med on:click