--- title: event.preventDefault slug: Web/API/Event/preventDefault tags: - API - DOM - Evènement - Gecko - Méthodes translation_of: Web/API/Event/preventDefault ---
{{ ApiRef("DOM") }}
 

La méthode  preventDefault() de l 'interface {{domxref("Event")}} indique à l'{{Glossary("user agent","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 {{domxref("Event.stopPropagation", "stopPropagation()")}} ou {{domxref("Event.stopImmediatePropagation", "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) :

{{EmbedLiveSample("Blocking_default_click_handling")}}

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 {{event("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 :

{{ EmbedLiveSample('Stopping_keystrokes_from_reaching_an_edit_field', 600, 200) }}

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é {{domxref("event.defaultPrevented")}} à true.

Vous pouvez utiliser {{domxref("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

Spécification Statut Commentaire
{{SpecName('DOM WHATWG', '#dom-event-preventdefault', 'Event.preventDefault()')}} {{ Spec2('DOM WHATWG') }}  
{{SpecName('DOM2 Events', '#Events-Event-preventDefault', 'Event.preventDefault()')}} {{ Spec2('DOM2 Events') }} Définition initiale.

Compatibilité des navigateurs

{{Compat("api.Event.preventDefault")}}