Généralités
Annule l'évènement s'il est annulable, sans stopper sa propagation.
Syntaxe
event.preventDefault();
Exemple
L'action par défaut du clic sur une checkbox est de changer son état. Cet exemple montre comment annuler cette action :
<!DOCTYPE html>
<html>
<head>
<title>Exemple avec preventDefault</title>
<script>
function stopDefAction(evt) {
evt.preventDefault();
}
document.getElementById('my-checkbox').addEventListener(
'click', stopDefAction, false
);
</script>
</head>
<body>
<p>Veuillez cliquer sur la checkbox.</p>
<form>
<input type="checkbox" id="my-checkbox" />
<label for="my-checkbox">Checkbox</label>
</form>
</body>
</html>
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().
<!DOCTYPE html>
<html>
<head>
<title>Exemple avec preventDefault</title>
<script>
var myTextbox = document.getElementById('my-textbox');
function checkName(evt) {
var charCode = evt.charCode;
if (charCode != 0) {
if (charCode < 97 || charCode > 122) {
evt.preventDefault();
alert(
"Veuillez n'entrer que des lettres minuscules." + "\n"
+ "charCode: " + charCode + "\n"
);
}
}
}
myTextbox.addEventListener( 'keypress', checkName, false );
</script>
</head>
<body>
<p>Veuillez entrer votre nom en minuscules.</p>
<form>
<input type="text" id="my-textbox" />
</form>
</body>
</html>
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.
preventDefault n'arrête pas la propagation d'un évènement à travers le DOM. event.stopPropagation doit être utilisé dans ce cas.