Come annullare gli eventi in JavaScript?

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 efficacemente il traffico di un particolare sito Web. In tali casi, l'annullamento degli eventi in JavaScript fa miracoli a disabilitare alcune funzionalità e gestire tali scenari di caso.

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 nel metodo JavaScript usando prevenzione

IL "PreventDefault ()"Il metodo annulla l'evento allegato se è annullato. Questo metodo può essere utilizzato per staccare l'evento allegato dal collegamento accessibile, impedendo così l'azione da eseguire.

Sintassi

evento.PreventDefault ()

Nella sintassi data:

• • "evento"Si riferisce all'evento da staccare.

Esempio

Passa attraverso il code-snippet di seguito:

L'evento click verrà annullato!

Visita il sito web di Google
documento.getElementById ("Sito").addEventListener ("Click", funzione (annulla)
Annulla.preventDefault ();
);

Seguire i passaggi indicati:

• • In primo luogo, includi l'intestazione dichiarata da visualizzare sul modello di oggetto document (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'aiuto di una funzione usando il"addEventListener ()" metodo.
  • Finalmente il "PreventDefault ()"Il metodo verrà applicato con l'aiuto del parametro della funzione per staccare l'evento allegato.

Produzione

Approccio 2: Annulla eventi in JavaScript restituendo un valore booleano

Questo approccio può essere implementato restituendo il "falso"Valore booleano all'evento attivato.

Esempio

Le seguenti righe di codice dimostrano il concetto dichiarato:

funzione cancelEvent ()
restituire false;
Avviso ("Questa affermazione non verrà visualizzata")

Nel frammento di codice sopra:

• • Innanzitutto, all'interno del ""Tag, allocare un campo di testo input.
  • Inoltre, allega un "OnInput"Evento con il specificato"segnaposto" valore. Ciò comporterà l'invocazione della funzione specificata all'ingresso del testo.
  • Ora, nella parte JavaScript del codice, dichiara una funzione denominata "cancelEvent ()". Nella sua definizione, restituire il valore booleano "falso"Per annullare l'incluso"evento".
  • Infine, specificare il messaggio dichiarato nella casella di avviso. Il valore booleano restituito si tradurrà nell'evitare la dialogo da visualizzare.

Produzione

Nell'output sopra, si può osservare che dopo la funzione accessibile, la finestra di dialogo di avviso non viene visualizzata, annullando così l'evento allegato.

Approccio 3: Annulla eventi nel metodo JavaScript utilizzando StopPropagation ()

IL "stoppropagation ()"Il metodo impedisce che lo stesso evento venga propagato. Questo metodo può essere utilizzato per smettere di propagare tra i due div al controllo della casella di controllo.

Sintassi

evento.stoppropagation ()

Esempio

Osserva le seguenti righe di codice:

Fai clic sul sito Web per osservare la modifica:

Linuxhint
Sito web

• • Nel primo passo, allo stesso modo, includere l'intestazione dichiarata.
  • Ora, includi due "div"Tag con allegato"al clic"Eventi con ciascuno di essi invocando due diverse funzioni Element2 () ed Element1 ().
  • Inoltre, includi una casella di controllo con l'ID specificato. Questa casella di controllo comporterà l'interruzione della propagazione tra due div.

Ora, guarda le seguenti righe di codice JavaScript:

funzione elemento1 (e)
avviso ("hai fatto clic sul sito Web");
if (documento.getElementById ("Controlla").controllato)
e.stoppropagation ();


function element2 ()
avviso ("hai fatto clic su LinuxHint");

Nel codice JS sopra:

• • Definire una funzione chiamata "elemento1 ()". Qui, il parametro "e" si riferisce a "evento"Essere licenziati specificati nella parte HTML del codice.
  • Nella sua definizione, visualizzare la finestra di dialogo Avviso con il messaggio dichiarato.
  • Successivamente, accedi alla casella di controllo creata dal suo ID usando "getElementById ()" metodo. Inoltre, applica il "controllato"Proprietà per verificare la condizione della casella di controllo selezionata.
  • Quindi, applica il "stoppropagation ()"Metodo che si riferisce al parametro"e". Ciò comporterà l'interruzione della propagazione da una funzione all'altra funzione.
  • Allo stesso modo, definisci un'altra funzione "elemento2 ()"Per essere propagato. Questa funzione sarà funzionale prima della propagazione.

Produzione

Qui, osserva il comportamento facendo clic sul Div al controllo della casella di controllo.

Abbiamo compilato gli approcci per annullare gli eventi in JavaScript.

Conclusione

IL "PreventDefault ()Metodo ", il"valore booleanoApproccio "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 il "falso"Valore booleano all'evento attivato. Il metodo StopPropagation () può essere applicato per smettere di propagare tra i due div con l'aiuto di una casella di controllo inclusa. Questo tutorial ha spiegato per annullare gli eventi in JavaScript.