Event.preventDefault()
Resumo
Cancela o evento se for cancelável, sem parar a propagação do mesmo.
Sintaxe
event.preventDefault();
Exemplo
Alternar é a ação padrão de clicar em uma caixa de seleção. Este exemplo demonstra como impedir que isso aconteça:
<!doctype html>
<html>
<head>
<title>preventDefault example</title>
<script>
function stopDefAction(evt) {
evt.preventDefault();
}
document
.getElementById("my-checkbox")
.addEventListener("click", stopDefAction, false);
</script>
</head>
<body>
<p>Please click on the checkbox control.</p>
<form>
<input type="checkbox" id="my-checkbox" />
<label for="my-checkbox">Checkbox</label>
</form>
</body>
</html>
Você pode ver o preventDefault
em ação aqui.
O exemplo a seguir demonstra como um input com texto inválido pode ser parado ao chegar ao campo de entrada com o preventDefault().
<!DOCTYPE html>
<html>
<head>
<title>preventDefault example</title>
<script>
function Init() {
var myTextbox = document.getElementById("my-textbox");
myTextbox.addEventListener("keypress", checkName, false);
}
function checkName(evt) {
var charCode = evt.charCode;
if (charCode != 0) {
if (charCode < 97 || charCode > 122) {
evt.preventDefault();
alert(
"Please use lowercase letters only." +
"\n" +
"charCode: " +
charCode +
"\n",
);
}
}
}
</script>
</head>
<body onload="Init ()">
<p>Please enter your name using lowercase letters only.</p>
<form>
<input type="text" id="my-textbox" />
</form>
</body>
</html>
Aqui está o resultado do código anterior:
Notas
Chamar preventDefault durante qualquer fase do fluxo de eventos cancela o evento, o que significa que qualquer ação padrão normalmente feita pela aplicação como um resultado do evento não ocorrerá.
Nota:
A partir do Gecko 6.0, chamar o preventDefault()
faz com que o event.defaultPrevented
se torne true.
Você pode usar o event.cancelable para checar se o evento é cancelável. Chamar o preventDefault
para um evento não cancelável não fará efeito.
Se o preventDefault não parar a propagação do evento através do DOM. event.stopPropagation deve ser usada para isso.
Especificações
Specification |
---|
DOM Standard # ref-for-dom-event-preventdefault③ |
Compatibilidade com navegadores
BCD tables only load in the browser