Event.preventDefault()

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since September 2021.

La méthode preventDefault(), rattachée à l'interface Event, indique à l'agent utilisateur que si l'évènement n'est pas explicitement géré, l'action par défaut ne devrait pas être exécutée comme elle l'est normalement.

L'évènement continue sa propagation habituelle à moins qu'un des gestionnaires d'évènement invoque stopPropagation() ou stopImmediatePropagation() pour interrompre la propagation.

Comme indiqué ci-après, appeler preventDefault() n'aura aucun effet pour un évènement qui ne peut être annulé (comme ceux émis par EventTarget.dispatchEvent() sans avoir indiqué cancelable: true).

Syntaxe

event.preventDefault();

Exemples

Bloquer la gestion du clic par défaut

Lorsqu'on clique sur une case à cocher, par défaut, cela coche ou décoche la case. Dans cet exemple, on illustre comment bloquer ce comportement par défaut :

JavaScript

document.querySelector("#id-checkbox").addEventListener(
  "click",
  function (event) {
    console.log("Désolé ! preventDefault() ne vous laissera pas cocher ceci.");
    event.preventDefault();
  },
  false,
);

HTML

html

<p>Essayez de cliquer sur la case à cocher.</p>

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

Résultat

Empêcher les pressions du clavier sur un champ texte

Dans l'exemple qui suit, on démontre comment empêcher d'écrire au clavier dans un champ texte grâce à preventDefault().

HTML

Voici le formulaire contenant le champ texte :

html

<form>
  <label
    >Un champ texte
    <input type="text" id="mon-champ-texte" />
  </label>
</form>

JavaScript

Et voici le fragment de code JavaScript qui s'occupe de la logique principale. On commence par enregistrer un gestionnaire d'évènement pour keypress :

let monChampTexte = document.getElementById("mon-champ-texte");
monChampTexte.addEventListener("keypress", bloqueSaisie, false);

La fonction bloqueSaisie() empêche toute saisie au clavier :

function bloqueSaisie(evt) {
  evt.preventDefault();
  console.log("Une saisie a été empêchée.");
}

Résultat

Notes

Invoquer preventDefault() à n'importe quel moment du cycle de vie d'un évènement annulera cet évènement. Cela signifie que toute action par défaut, normalement exécutée par le navigateur, n'aura pas lieu.

On peut utiliser la propriété Event.cancelable afin de vérifier si un évènement est annulable. Invoquer preventDefault() sur un évènement non-annulable n'aura aucun effet.

Spécifications

Specification
DOM Standard # ref-for-dom-event-preventdefault③

Compatibilité des navigateurs

BCD tables only load in the browser