Lors de la mise à jour d'une page Web ou du site Web, il existe des situations où certains liens inclus ne sont plus nécessaires ou deviennent inutiles. En plus de cela, gérer efficacement le trafic d'un site Web particulier. Dans de tels cas, l'annulation des événements dans JavaScript fait des merveilles en désactivant certaines fonctionnalités et en gérant de tels scénarios.
Comment annuler des événements en JavaScript ?
Les approches suivantes peuvent être utilisées pour annuler des événements en JavaScript :
-
- ' preventDefault() ' méthode.
- ' Valeur booléenne ' approcher.
- ' stopPropagation() ' méthode.
Approche 1 : annuler des événements en JavaScript à l'aide de la méthode preventDefault()
La ' preventDefault() ” annule l'événement joint s'il est annulable. Cette méthode peut être utilisée pour détacher l'événement joint du lien accédé, empêchant ainsi l'exécution de l'action.
Syntaxe
event.preventDefault ( )
Dans la syntaxe donnée :
-
- ' un événement » fait référence à l'événement à détacher.
Exemple
Parcourez l'extrait de code ci-dessous :
< h3 > L'événement Click sera annulé ! h3 >
< un identifiant = 'placer' href = 'https://www.google.com/' > Visitez le site Web de Google un >
document.getElementById ( 'placer' ) .addEventListener ( 'Cliquez sur' , fonction ( annuler ) {
cancel.preventDefault ( ) ;
} ) ;
Suivez les étapes ci-dessous :
-
- Tout d'abord, incluez l'en-tête indiqué à afficher sur le modèle d'objet de document (DOM).
- Après cela, spécifiez le ' URL ' en utilisant le ' href ' attribut.
- Maintenant, dans la partie JavaScript du code, accédez à l'URL spécifiée.
- Joignez également un ' Cliquez sur ' événement avec l'URL à l'aide d'une fonction utilisant le ' addEventListener() ' méthode.
- Finalement, le ' preventDefault() ” sera appliquée à l'aide du paramètre de la fonction pour détacher l'événement attaché.
Production
Approche 2 : annuler des événements en JavaScript en renvoyant une valeur booléenne
Cette approche peut être implémentée en retournant le ' faux ” valeur booléenne lors de l'événement déclenché.
Exemple
Les lignes de code suivantes illustrent le concept indiqué :
< centre >< saisir taper = 'texte' espace réservé = 'Entrez du texte' en entrée = 'annuler l'événement ()' > centre >fonction annuler l'événement ( ) {
revenir faux ;
alerte ( 'Cette déclaration ne sera pas affichée' )
}
Dans l'extrait de code ci-dessus :
-
- Tout d'abord, au sein du «
”, allouez un champ de saisie de texte. - Joignez également un ' en entrée ” événement avec le “ spécifié espace réservé ' évaluer. Cela entraînera l'appel de la fonction spécifiée lors de la saisie du texte.
- Maintenant, dans la partie JavaScript du code, déclarez une fonction nommée ' annulerEvent() ”. Dans sa définition, retourner la valeur booléenne ' faux ' pour annuler le inclus ' un événement ”.
- Enfin, spécifiez le message indiqué dans la boîte d'alerte. La valeur booléenne renvoyée aura pour effet d'éviter l'affichage de la boîte de dialogue.
- Tout d'abord, au sein du «
Production
Dans la sortie ci-dessus, on peut observer que lors de l'accès à la fonction, la boîte de dialogue d'alerte ne s'affiche pas, annulant ainsi l'événement joint.
Approche 3 : annuler des événements en JavaScript à l'aide de la méthode stopPropagation()
La ' stopPropagation() ” empêche la propagation du même événement. Cette méthode peut être utilisée pour arrêter la propagation entre les deux divs en cochant la case.
Syntaxe
event.stopPropagation ( )
Exemple
Observez les lignes de code suivantes :
< centre >< h3 > Cliquez sur le site Web pour observer le changement : h3 >< div sur clic = 'élément2()' > Linux
< div sur clic = 'élément1(événement)' > Site Internet div >
div >
< Br >
Cochez pour arrêter la propagation :
< saisir taper = 'case à cocher' identifiant = 'Chèque' >
centre >
-
- Dans la première étape, de la même manière, incluez le titre indiqué.
- Maintenant, incluez deux ' div 'tags avec pièce jointe' sur clic ” événements avec chacun d'eux invoquant deux fonctions différentes element2() et element1().
- Incluez également une case à cocher avec l'identifiant spécifié. Cette case à cocher aura pour effet d'arrêter la propagation entre deux divs.
Maintenant, regardez les lignes de code JavaScript suivantes :
fonction élément1 ( et ) {alerte ( 'Vous avez cliqué sur le site Web' ) ;
si ( document.getElementById ( 'Chèque' ) .vérifié ) {
e.stopPropagation ( ) ;
}
}
fonction élément2 ( ) {
alerte ( 'Vous avez cliqué sur Linuxhint' ) ;
}
Dans le code js ci-dessus :
-
- Définissez une fonction nommée ' élément1() ”. Ici, le paramètre ' et ' se réfère à la ' un événement ” étant déclenché spécifié dans la partie HTML du code.
- Dans sa définition, affiche la boîte de dialogue d'alerte comportant le message indiqué.
- Après cela, accédez à la case à cocher créée par son identifiant en utilisant le ' getElementById() ' méthode. Aussi, appliquez le ' vérifié ” afin de vérifier l'état de la case cochée.
- Ensuite, appliquez le ' stopPropagation() ” méthode faisant référence au paramètre “ et ”. Cela aura pour effet d'arrêter la propagation d'une fonction à l'autre fonction.
- De même, définissez une autre fonction ' élément2() » pour se propager. Cette fonction sera fonctionnelle avant propagation uniquement.
Production
Ici, observe le comportement en cliquant sur la div en cochant la case.
Nous avons compilé les approches pour annuler des événements en JavaScript.
Conclusion
La ' preventDefault() » méthode, la « valeur booléenne ' approche, ou la ' stopPropagation() ” peut être utilisée pour annuler des événements en JavaScript. La première méthode peut être mise en œuvre pour détacher l'événement attaché entraînant la désactivation du lien. L'approche de la valeur booléenne renvoie le ' faux ” valeur booléenne lors de l'événement déclenché. La méthode stopPropagation() peut être appliquée pour arrêter la propagation entre les deux divs à l'aide d'une case à cocher incluse. Ce tutoriel explique comment annuler des événements en JavaScript.