Durante l'aggiornamento di una pagina Web o del sito Web, ci sono situazioni in cui alcuni collegamenti inclusi non sono più necessari o diventano irrilevanti. Oltre a ciò, gestire in modo efficace il traffico di un determinato sito web. In questi casi, l'annullamento degli eventi in JavaScript fa miracoli nella disabilitazione di alcune funzionalità e nella gestione di tali scenari di casi.
Come annullare gli eventi in JavaScript?
I seguenti approcci possono essere utilizzati per annullare gli eventi in JavaScript:
-
- “ preventDefault() ' metodo.
- “ Valore booleano ' approccio.
- “ stopPropagation() ' metodo.
Approccio 1: Annulla eventi in JavaScript utilizzando il metodo preventDefault()
Il ' preventDefault() Il metodo ” annulla l'evento allegato se è annullabile. Questo metodo può essere utilizzato per staccare l'evento allegato dal collegamento a cui si accede, impedendo così l'esecuzione dell'azione.
Sintassi
event.preventDefault ( )
Nella sintassi data:
-
- “ evento ” si riferisce all'evento da staccare.
Esempio
Passa attraverso lo snippet di codice indicato di seguito:
< h3 > L'evento Click verrà annullato ! h3 >
< un id = 'luogo' href = 'https://www.google.com/' > Visita il sito web di Google un >
document.getElementById ( 'luogo' ) .addEventListener ( 'clic' , funzione ( Annulla ) {
cancel.preventDefault ( ) ;
} ) ;
Segui i passaggi indicati di seguito:
-
- In primo luogo, includi l'intestazione dichiarata da visualizzare sul Document Object Model (DOM).
- Successivamente, specificare il ' URL ' usando il ' href ” attributo.
- Ora, nella parte JavaScript del codice, accedi all'URL specificato.
- Inoltre, allega un ' clic ” evento con l'URL con l'ausilio di una funzione che utilizza il “ addEventListener() ' metodo.
- Infine, il “ preventDefault() ” verrà applicato con l'aiuto del parametro della funzione per staccare l'evento allegato.
Produzione
Approccio 2: annullare gli eventi in JavaScript restituendo un valore booleano
Questo approccio può essere implementato restituendo il ' falso ” valore booleano sull'evento attivato.
Esempio
Le seguenti righe di codice dimostrano il concetto affermato:
< centro >< ingresso genere = 'testo' segnaposto = 'Inserire il testo' in ingresso = 'cancellaEvento()' > centro >funzione cancelEvent ( ) {
Restituzione falso ;
mettere in guardia ( 'Questa dichiarazione non verrà visualizzata' )
}
Nel frammento di codice sopra:
-
- Innanzitutto, all'interno del '
” , alloca un campo di testo di input. - Inoltre, allega un ' in ingresso ” evento con il “ segnaposto ' valore. Ciò comporterà il richiamo della funzione specificata all'immissione del testo.
- Ora, nella parte JavaScript del codice, dichiara una funzione denominata ' cancelEvent() ”. Nella sua definizione, restituisce il valore booleano “ falso ” per cancellare l'incluso “ evento ”.
- Infine, specifica il messaggio indicato nella casella di avviso. Il valore booleano restituito impedirà la visualizzazione della finestra di dialogo.
- Innanzitutto, all'interno del '
Produzione
Nell'output di cui sopra si osserva che all'atto dell'accesso la finestra di dialogo di avviso non viene visualizzata annullando l'evento allegato.
Approccio 3: Annulla eventi in JavaScript utilizzando il metodo stopPropagation()
Il ' stopPropagation() ” impedisce la propagazione dello stesso evento. Questo metodo può essere utilizzato per interrompere la propagazione tra i due div dopo aver selezionato la casella di controllo.
Sintassi
event.stopPropagation ( )
Esempio
Osservare le seguenti righe di codice:
< centro >< h3 > Fare clic sul sito Web per osservare la modifica: h3 >< div al clic = 'elemento2()' > Linux
< div al clic = 'elemento1(evento)' > Sito web div >
div >
< fr >
Seleziona per interrompere la propagazione:
< ingresso genere = 'casella di controllo' id = 'dai un'occhiata' >
centro >
-
- Nella prima fase, allo stesso modo, includi l'intestazione indicata.
- Ora, includi due ' div ” tag con allegato “ al clic ” eventi con ciascuno di essi che invoca due diverse funzioni element2() ed element1().
- Inoltre, includi una casella di controllo con l'ID specificato. Questa casella di controllo comporterà l'arresto della propagazione tra due div.
Ora, guarda le seguenti righe di codice JavaScript:
funzione elemento1 ( e ) {mettere in guardia ( 'Hai cliccato sul sito web' ) ;
Se ( document.getElementById ( 'dai un'occhiata' ) .controllato ) {
e.stopPropagation ( ) ;
}
}
funzione elemento2 ( ) {
mettere in guardia ( 'Hai cliccato Linuxhint' ) ;
}
Nel codice js sopra:
-
- Definisci una funzione denominata “ elemento1() ”. Qui il parametro “ e ' si riferisce a ' evento ” viene attivato specificato nella parte HTML del codice.
- Nella sua definizione, visualizzare la finestra di dialogo di avviso con il messaggio dichiarato.
- Successivamente, accedi alla casella di controllo creata tramite il suo ID utilizzando il ' getElementById() ' metodo. Inoltre, applica il ' controllato ” ad esso per verificare la condizione della casella di controllo selezionata.
- Quindi, applica il ' stopPropagation() ” metodo riferito al parametro “ e ”. Ciò comporterà l'arresto della propagazione da una funzione all'altra.
- Allo stesso modo, definisci un'altra funzione ' elemento2() ” da propagare. Questa funzione sarà funzionale solo prima della propagazione.
Produzione
Qui, osserva il comportamento facendo clic sul div dopo aver selezionato la casella di controllo.
Abbiamo compilato gli approcci per annullare gli eventi in JavaScript.
Conclusione
Il ' preventDefault() ” metodo, il “ valore booleano ” approccio, o il “ stopPropagation() Il metodo ” può essere utilizzato per annullare gli eventi in JavaScript. Il primo metodo può essere implementato per staccare l'evento allegato con conseguente disabilitazione del collegamento. L'approccio del valore booleano restituisce ' falso ” valore booleano sull'evento attivato. Il metodo stopPropagation() può essere applicato per interrompere la propagazione tra i due div con l'aiuto di una casella di controllo inclusa. Questo tutorial ha spiegato come annullare gli eventi in JavaScript.