Stoppe hendelsespropagering
Forstå .stopPropagation() og .preventDefault() for å kontrollere hendelsesflyten, hindre nettleserens standardhandlinger og håndtere komplekse hendelsessamspill effektivt.
Stoppe hendelsespropagering er en gratis leksjon i jQuery Academy på CoddyKit. Dette er leksjon 2 av 3. Du kan lese valgfritt 3 leksjoner fra denne læringsstien gratis i sin helhet – deretter låser CoddyKit PRO opp alle leksjoner, samt praktisk øving med en innebygd kodeeditor og en AI-veileder som er tilgjengelig døgnet rundt. Den er en del av læringsløpet i jQuery Academy, og fremdriften din synkroniseres mellom nettet og CoddyKit-appen. Kurset i jQuery Academy inneholder totalt 3 leksjoner.
Ta kontroll over hendelsene Deres!
Hendelser som klikk eller innsending av skjemaer skjer ikke bare på ett element. De beveger seg ofte gjennom Document Object Model (DOM).
Å lære å kontrollere denne flyten er viktig for å bygge presise og interaktive nettsider.
Forhindre standardhandlinger
Nettlesere har standardhandlinger for mange HTML-elementer. For eksempel:
- Hvis De klikker på et
<a>-element, navigerer nettleseren til en ny side. - Hvis De sender inn et
<form>, lastes siden inn på nytt.
Vi bruker event.preventDefault() for å stoppe disse innebygde nettleserhandlingene.
`preventDefault()` i praksis
Prøv å klikke på lenken nedenfor. Vanligvis ville den tatt Dem til example.com, men .preventDefault() stopper navigeringen!
<!DOCTYPE html>
<html>
<head>
<title>Prevent Default</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
</head>
<body>
<h1>Prevent Default Example</h1>
<a href="https://example.com" id="myLink">Click Me! (Should not navigate)</a>
<div id="output"></div>
<script>
$(document).ready(function() {
$('#myLink').on('click', function(event) {
event.preventDefault(); // Stop the link from navigating
$('#output').append('<p>Link click prevented! You\'re still here.</p>');
});
});
</script>
</body>
</html>Forstå event bubbling
Når en hendelse oppstår på et element, for eksempel et klikk, utløser den ikke bare handlere på dette elementet. Den «bobler» opp gjennom DOM-treet.
- Den utløser handlere på det overordnede elementet.
- Deretter på elementets overordnede element.
- Og så videre, helt opp til
<body>og<html>.
Denne bevegelsen oppover kalles event bubbling.
Stopp boblingen: `stopPropagation()`
Noen ganger ønsker De at en hendelse bare skal håndteres av elementet den oppsto på, eller av et bestemt overordnet element, uten å påvirke elementer på høyere nivå.
Det er her event.stopPropagation() kommer inn. Den stopper hendelsen fra å boble videre opp gjennom DOM-treet.
Eksempel på `stopPropagation()`
Klikk på den indre boksen. Uten stopPropagation() ville begge meldingene blitt vist. Med stopPropagation() vises bare meldingen fra den indre boksen, fordi boblingen stoppes.
<!DOCTYPE html>
<html>
<head>
<title>Stop Propagation</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<style>
#outer {
padding: 20px;
background-color: lightblue;
border: 1px solid blue;
margin: 10px;
}
#inner {
padding: 20px;
background-color: lightcoral;
border: 1px solid red;
margin-top: 10px;
}
</style>
</head>
<body>
<h1>Stop Propagation Example</h1>
<div id="outer">
Outer Div (Click me!)
<div id="inner">
Inner Div (Click me!)
</div>
</div>
<div id="log"></div>
<script>
$(document).ready(function() {
$('#outer').on('click', function() {
$('#log').append('<p>Outer Div clicked!</p>');
});
$('#inner').on('click', function(event) {
event.stopPropagation(); // Stop bubbling here
$('#log').append('<p>Inner Div clicked!</p>');
});
});
</script>
</body>
</html>Praktisk bruk av å stoppe bobling
stopPropagation() er nyttig i scenarier som:
- Modale dialogbokser: Forhindre at klikk inne i en modal lukker den ved å utløse et klikk på overlegget.
- Nøstede nedtrekksmenyer: Holde en underordnet nedtrekksmeny åpen når den overordnede menyen klikkes.
- Komplekse UI-komponenter: Sørge for at hendelseshandlere for bestemte komponenter ikke forstyrrer globale lyttere.
Hendelsesobjektet
Både .preventDefault() og .stopPropagation() er metoder på hendelsesobjektet. Dette objektet sendes som et argument til funksjonen som håndterer hendelsen.
Hendelsesobjektet inneholder mye nyttig informasjon om hendelsen som oppsto, for eksempel typen, målelementet og musekoordinatene.
<!DOCTYPE html>
<html>
<head>
<title>Event Object</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
</head>
<body>
<h1>Event Object Properties</h1>
<button id="myButton">Click Me</button>
<div id="output"></div>
<script>
$(document).ready(function() {
$('#myButton').on('click', function(event) {
$('#output').empty(); // Clear previous output
$('#output').append('<p>Event Type: <code>' + event.type + '</code></p>');
$('#output').append('<p>Target Element ID: <code>' + event.target.id + '</code></p>');
$('#output').append('<p>Mouse X Position: <code>' + event.pageX + '</code></p>');
$('#output').append('<p>Mouse Y Position: <code>' + event.pageY + '</code></p>');
});
});
</script>
</body>
</html>Kombinere begge metodene
Noen ganger må De bruke både .preventDefault() og .stopPropagation(). De løser forskjellige problemer:
.preventDefault(): Stopper nettleserens standardhandling..stopPropagation(): Stopper hendelsen fra å bevege seg opp gjennom DOM-en.
En knapp inne i en kompleks komponent kan for eksempel måtte forhindre standardhandlingen for klikket OG stoppe klikket fra å utløse handlere på overordnede elementer.
Forstå hendelseskontroll
De har en lenke <a href="#" id="link"> inne i en div <div id="container">. De vil forhindre at lenken navigerer, og samtidig forhindre at klikkhendelsen utløser en handler på #container.
Oppsummering: Hendelseskontroll
Godt jobbet! De har lært å mestre hendelsesflyten:
.preventDefault(): Stopper nettleserens standardhandling for en hendelse, for eksempel navigering fra en lenke eller innsending av et skjema..stopPropagation(): Forhindrer at en hendelse bobler opp gjennom DOM-treet til overordnede elementer.
Disse kraftige metodene gir Dem presis kontroll over hvordan hendelser oppfører seg i webapplikasjonene Deres, noe som gir mer forutsigbare og robuste brukeropplevelser.
Lær deg JavaScript med en AI-veileder – gratis
Skriv og kjør ekte kode i nettleseren, få umiddelbar hjelp fra en AI-veileder som er tilgjengelig døgnet rundt, og fortsett der du slapp – på nettet eller i appen.
- Kurs
- 22
- Leksjoner
- 48
Ofte stilte spørsmål
Er leksjonen «Stoppe hendelsespropagering» gratis?
Ja – du kan lese valgfritt 3 av leksjonene i læringsstien jQuery Academy, inkludert «Stoppe hendelsespropagering», gratis i sin helhet her på nettet. Deretter låser CoddyKit PRO opp alle leksjoner, samt interaktiv øving med en innebygd kodeeditor og en AI-veileder som er tilgjengelig døgnet rundt. Kurset i jQuery Academy inneholder totalt 3 leksjoner.
Hva lærer jeg i «Stoppe hendelsespropagering»?
Forstå .stopPropagation() og .preventDefault() for å kontrollere hendelsesflyten, hindre nettleserens standardhandlinger og håndtere komplekse hendelsessamspill effektivt. Du øver på jQuery Academy med praktisk kode som du kjører direkte i nettleseren, mens en AI-veileder som er tilgjengelig døgnet rundt, svarer på spørsmålene dine mens du jobber deg gjennom leksjonen.
Trenger jeg erfaring for å begynne med jQuery Academy?
Ingen tidligere erfaring er nødvendig. jQuery Academy på CoddyKit er lagt opp for både nybegynnere og viderekomne, så De kan begynne her eller helt fra start og lære i Deres eget tempo. Dette er leksjon 2 av 3.
Hvor lang tid tar leksjonen «Stoppe hendelsespropagering»?
De fleste CoddyKit-leksjoner tar omtrent 5–10 minutter. Hver leksjon er kort og interaktiv, slik at De gjør jevne fremskritt og kan fortsette akkurat der De slapp – både på nettet og i appen.
Kan jeg skrive og kjøre kode i denne jQuery Academy-leksjonen?
Ja. Alle jQuery Academy-leksjoner har en innebygd kodeeditor, slik at De kan skrive og kjøre ekte kode direkte i nettleseren og få umiddelbar tilbakemelding fra AI – uten lokal konfigurering.
Alle leksjonene i dette kurset
- Robust implementering av hendelsesdelegering
- Stoppe hendelsespropagering
- Opprette og utløse egendefinerte hendelser