L'instruction event.preventDefault() se charge d'empêcher le comportement par défaut qui aurait dû se manifester lorsqu'une action a eu lieu. Par exemple, lorsque l'action consiste à cliquer sur un bouton de soumission, event.preventDefault() empêchera la soumission du formulaire.
Ex :
$(function() {
$('#soumettre').click(function ( event ) {
if (!validerDonnees()) {
event.preventDefault(); // empêchera la soumission du formulaire
}
});
});
L'instruction event.preventDefault() est parfois accompagnée d'une autre instruction : event.stopPropagation(). Celle-ci peut être un peu plus difficile à comprendre.
Pour illustrer son fonctionnement, prenons le code HTML suivant :
<form id="ajoutproduit" method="post" action="...">
<p class="surbrillance">
<label class="aligne" for="code">* Code :</label>
<input type="text" id="code" name="code" required />
</p>
<p class="surbrillance">
<label class="aligne" for="titrecourt">* Titre court :</label>
<input type="text" id="titrecourt" name="titrecourt" required />
</p>
...
<p class="surbrillance">
<input type="submit" value="Soumettre" name="soumettre" id="soumettre" />
</p>
</form>
On veut qu'à chaque fois qu'on clique dans un paragraphe ayant la classe "surbrillance", le fond de ce paragraphe change de couleur.
$(function() {
$('p.surbrillance').click(function () {
// décolore tous les paragraphes
$('p.surbrillance').css('background-color', 'transparent');
// colore le paragraphe actuel
$(this).css('background-color', 'yellow');
});
});
On veut également que sur le clic du bouton de soumission, une donnée non valide empêche la soumission du formulaire, comme l'indique le premier extrait de code de cette page.
Ce qu'il faut comprendre, c'est que lorsqu'on clique sur le bouton, on clique également sur le paragraphe qui contient ce bouton. Ainsi, si on utilise event.preventDefault(), la soumission du formulaire n'aura pas lieu mais le gestionnaire d'événement rattaché au clic sur le paragraphe qui contient le bouton sera tout de même exécuté.
C'est ce qu'on appelle le processus de propagation des événements. Par analogie avec des bulles qui remontent, ce processus s'appelle event bubbling en anglais.
Si on ne souhaite pas que le gestionnaire d'événement rattaché au clic sur le paragraphe soit exécuté, on peut le préciser avec event.stopPropagation().
$(function() {
$('#soumettre').click(function ( event ) {
if (!validerDonnees()) {
event.preventDefault();
event.stopPropagation(); // n'exécutera pas ce qu'il y a dans $('p.surbrillance').click()
}
});
});
Est-ce qu'on devrait toujours utiliser event.stopPropagation() avec event.preventDefault() ? Eh bien, ça dépend de notre besoin. Dans l'exemple de cette page, je trouve plus intéressant que le paragraphe soit mis en couleur lorsqu'on clique sur le bouton de soumission. Je n'aurais donc pas mis le event.stopPropagation().
Dans un autre cas, on pourrait avoir un gestionnaire d'événement dans la hiérarchie qui se charge de faire un appel AJAX qui ne doit pas avoir lieu lorsqu'on rencontre des données non valides. À ce moment, le event.stopPropagation() sera essentiel.
On rencontre parfois des extraits de code qui empêchent une action par défaut, comme la soumission d'un formulaire, en faisant return false.
Cette technique est à éviter car elle n'indique pas clairement ce qui est réalisé.
Dans les faits, lorsqu'on fait return false, on fait un event.preventDefault() suivi d'un event.stopPropagation().
Il est donc préférable d'inscrire les deux instructions par souci de clarté.
Ex :
$(function() {
$('#soumettre').click(function ( event ) {
if (!validerDonnees()) {
// on voit mal que ceci empêche la soumission du formulaire ET la propagation des événements
event.preventDefault();
event.stopPropagation();
}
});
});
« What Is Event Bubbling in JavaScript? Event Propagation Explained ». Sitepoint. https://www.sitepoint.com/event-bubbling-javascript/
▼Publicité
Site fièrement hébergé chez A2 Hosting.
