La méthode  preventDefault() de l 'interface Event indique à l'agent utilisateur que si l'événement n'est pas traité explicitement, son action par défaut ne doit pas être prise en compte comme elle le serait normalement. L'événement continue à se propager comme d'habitude, sauf si l'un de ses écouteurs appelle stopPropagation() ou stopImmediatePropagation() , dont l'un ou l'autre termine la propagation.

Syntaxe

Event.preventDefault();

Paramètres

None (aucun)

Valeur retournée

undefined.

Exemples

Bloquer la gestion des clics par défaut

L'action par défaut du clic sur une case à cocher est le changement de son état. Cet exemple montre comment annuler cette action :

JavaScript

document.querySelector("#id-checkbox").addEventListener("click", function(event) {
         document.getElementById("output-box").innerHTML += "Sorry! <code>preventDefault()</code> won't let you check this!<br>";
         event.preventDefault();
}, false);

HTML

<p>Please click on the checkbox control.</p>

<form>
  <label for="id-checkbox">Checkbox:</label>
  <input type="checkbox" id="id-checkbox"/>
</form>

<div id="output-box"></div>

Résultat

Vous pouvez voir preventDefault en action ici (anglais) :

Arrêter les frappes de touches pour atteindre un champ d'édition

L'exemple suivant montre comment bloquer la saisie de texte invalide dans un champ input avec preventDefault()Actuellement, vous devriez normalement utiliser la validation de forme HTML native à la place.

HTML

Ici le formulaire :

<div class="container">
  <p>Please enter your name using lowercase letters only.</p>

  <form>
    <input type="text" id="my-textbox">
  </form>
</div>

CSS

Nous utilisons un peu de CSS pour la boîte d'avertissement qui sera dessinée lorsque l'utilisateur appuie sur une touche non valide :

.warning {
  border: 2px solid #f39389;
  border-radius: 2px;
  padding: 10px;
  position: absolute;
  background-color: #fbd8d4;
  color: #3b3c40;
}

JavaScript

Et voici le code JavaScript qui fait le travail. Tout d'abord, écoutez les événements keypress:

var myTextbox = document.getElementById('my-textbox');
myTextbox.addEventListener('keypress', checkName, false);

La fonction checkName(), qui regarde la touche enfoncée et décide de l'autoriser :

function checkName(evt) {
  var charCode = evt.charCode;
  if (charCode != 0) {
    if (charCode < 97 || charCode > 122) {
      evt.preventDefault();
      displayWarning(
        "Please use lowercase letters only."
        + "\n" + "charCode: " + charCode + "\n"
      );
    }
  }
}

La fonction displayWarning()  présente une notification d'un problème. Ce n'est pas une fonction élégante mais elle fait le travail nécessaire à cet exemple :

var warningTimeout;
var warningBox= document.createElement("div");
warningBox.className = "warning";

function displayWarning(msg) {
  warningBox.innerHTML = msg;

  if (warningBox) {
    window.clearTimeout(warningTimeout);
  } else {
    myTextbox.parentNode.insertBefore(warningBox, myTextbox);
  }

  warningTimeout = window.setTimeout(function() {
      warningBox.parentNode.removeChild(warningBox);
      warningTimeout = -1;
    }, 2000);
}

Résultat

Ici le résultat du code précédent :

Notes

Appeler preventDefault pendant chaque étape de la propagation de l'évènement annule celui-ci, ce qui signifie que chaque action par défaut se produisant normalement ne se produira pas.

Note : Depuis Gecko 6.0, appeler preventDefault() passe la valeur de la propriété event.defaultPrevented à true.

Vous pouvez utiliser Event.cancelable pour vérifier que l'évènement peut être annulé. Appeler preventDefault sur un évènement qui ne peut pas être annulé n'a aucun effet.

Spécification

Compatibilité des navigateurs

FonctionnalitéChromeEdgeFirefoxInternet ExplorerOperaSafari
Support simple Oui Oui Oui9 Oui Oui
FonctionnalitéAndroid webviewChrome for AndroidEdge mobileFirefox for AndroidOpera AndroidiOS SafariSamsung Internet
Support simple Oui Oui Oui Oui Oui Oui ?

Étiquettes et contributeurs liés au document

Étiquettes : 
Contributeurs à cette page : watsab, loella16, Hell_Carlito, robin850, fscholz, khalid32, Goofy, Delapouite, flo5589
Dernière mise à jour par : watsab,