Interruzione della propagazione degli eventi
Comprendere .stopPropagation() e .preventDefault() per controllare il flusso degli eventi, impedire le azioni predefinite del browser e gestire efficacemente interazioni complesse.
Interruzione della propagazione degli eventi è una lezione jQuery Academy gratuita su CoddyKit. Questa è la lezione 2 di 3. 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 jQuery Academy, e i tuoi progressi si sincronizzano tra il web e l'app CoddyKit. Il corso jQuery Academy include 3 lezioni in totale.
Controlli i Suoi eventi!
Eventi come i clic o l'invio dei moduli non si verificano soltanto su un elemento. Spesso attraversano il Document Object Model (DOM).
Imparare a controllare questo flusso è fondamentale per creare pagine web interattive e precise.
Impedire le azioni predefinite
I browser prevedono azioni predefinite per molti elementi HTML. Ad esempio:
- Facendo clic su un tag
<a>si passa a una nuova pagina. - Inviando un
<form>si ricarica la pagina.
Utilizziamo event.preventDefault() per interrompere questi comportamenti integrati del browser.
`preventDefault()` in azione
Provi a fare clic sul link qui sotto. Normalmente porterebbe a example.com, ma .preventDefault() interrompe la navigazione!
<!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>Comprendere il bubbling degli eventi
Quando si verifica un evento su un elemento, ad esempio un clic, non vengono attivati soltanto i gestori di quell'elemento. L'evento risale la struttura ad albero del DOM.
- Attiva i gestori sul relativo elemento genitore.
- Poi su quello del nonno.
- E così via, fino a
<body>e<html>.
Questo percorso verso l'alto si chiama bubbling degli eventi.
Arrestare il bubbling: `stopPropagation()`
A volte si desidera che un evento venga gestito soltanto dall'elemento da cui ha avuto origine, oppure da un genitore specifico, senza coinvolgere gli elementi di livello superiore.
È qui che entra in gioco event.stopPropagation(). Questo metodo impedisce all'evento di continuare a risalire la struttura ad albero del DOM.
Esempio di `stopPropagation()`
Faccia clic sul riquadro interno. Senza stopPropagation(), comparirebbero entrambi i messaggi. Con questo metodo, compare soltanto il messaggio del riquadro interno, perché il bubbling viene interrotto.
<!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>Utilizzi pratici dell'arresto del bubbling
stopPropagation() è utile in scenari come:
- Finestre di dialogo modali: impedire che i clic all'interno di una finestra modale la chiudano attivando un clic sull'overlay.
- Menu a discesa annidati: mantenere aperto un menu a discesa figlio quando si fa clic sul genitore.
- Componenti UI complessi: assicurarsi che i gestori degli eventi per componenti specifici non interferiscano con i listener globali.
L'oggetto evento
Sia .preventDefault() sia .stopPropagation() sono metodi dell'oggetto evento. Questo oggetto viene passato come argomento alla funzione che gestisce l'evento.
L'oggetto evento contiene molte informazioni utili sull'evento verificatosi, ad esempio il tipo, l'elemento target e le coordinate del mouse.
<!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>Combinare entrambi i metodi
A volte è necessario utilizzare sia .preventDefault() sia .stopPropagation(). Risolvono problemi diversi:
.preventDefault(): interrompe l'azione predefinita del browser..stopPropagation(): impedisce all'evento di risalire il DOM.
Ad esempio, un pulsante all'interno di un componente complesso potrebbe dover impedire il comportamento predefinito del clic E impedire che il clic attivi i gestori del genitore.
Comprendere il controllo degli eventi
Ha un link <a href="#" id="link"> all'interno di un div <div id="container">. Desidera impedire al link di eseguire la navigazione e impedire inoltre che l'evento di clic attivi qualsiasi gestore su #container.
Riepilogo: controllo degli eventi
Ottimo lavoro! Ha imparato a controllare il flusso degli eventi:
.preventDefault(): interrompe l'azione predefinita del browser per un evento, ad esempio la navigazione di un link o l'invio di un modulo..stopPropagation(): impedisce a un evento di risalire la struttura ad albero del DOM verso gli elementi genitori.
Questi potenti metodi consentono di controllare con precisione il comportamento degli eventi nelle applicazioni web, offrendo esperienze utente più prevedibili e solide.
Domande Frequenti
La lezione «Interruzione della propagazione degli eventi» è gratuita?
Sì — il testo completo di «Interruzione della propagazione degli eventi» è 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 jQuery Academy, passa a CoddyKit PRO. Il corso jQuery Academy include 3 lezioni in totale.
Cosa imparerò in «Interruzione della propagazione degli eventi»?
Comprendere .stopPropagation() e .preventDefault() per controllare il flusso degli eventi, impedire le azioni predefinite del browser e gestire efficacemente interazioni complesse. Eserciti jQuery 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 jQuery Academy?
Non è richiesta alcuna esperienza precedente. jQuery 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 2 di 3.
Quanto tempo richiede la lezione «Interruzione della propagazione degli eventi»?
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 jQuery Academy?
Sì. Ogni lezione jQuery 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
- Implementazione della delega degli eventi
- Interruzione della propagazione degli eventi
- Creazione e attivazione di eventi personalizzati