Stopper la propagation d’une action [Programmation]

[niveau: expert]

Lorsque vous avez un bouton <button> quelque part dans un formulaire HTML, alors que vous cliquez dessus avec Firefox, ce dernier va vouloir envoyer le formulaire, alors même que le bouton n’a pas cet objectif. En effet, supposons que vous vouliez que l’action onclick actionne une quelconque fonction javascript de votre cru.

Pour éviter ce comportement avec Firefox, on peut essayer d’insérer un return false qui aura plus ou moins de succès:

<button id="myButton" onclick="myFunction(); return false;">do it!</button>

Le return false donnera un résultat très aléatoire, et c’est pourquoi je conseille plutôt d’utiliser une fonction qui va stopper la propagation de l’évènement :

<button id="myButton" onclick="stopAction(event); myFunction();">do it!</button>

function stopAction(e) {
  if (!e) e = window.event;
  if (e.cancelBubble != undefined)
    e.cancelBubble = true;
  if (typeof e.stopPropagation != "undefined") {
    e.stopPropagation();
    e.preventDefault();
  }
  return false;
}

Avec ça, lorsque vous cliquez sur le bouton, la page ne devrait pas être rechargée.