event.preventDefault

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.

Event.preventDefault();

None (aucun)

undefined.

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) :

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 (en-US):

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 :

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.

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.