Join MDN and developers like you at Mozilla's View Source conference, 12-14 September in Berlin, Germany. Learn more at https://viewsourceconf.org

event.preventDefault

 

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.

Specification

Étiquettes et contributeurs liés au document

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