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 julho de 2015.
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 # ref-for-dom-event-preventdefault③ |