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 July 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:

html
<!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().

html
<!DOCTYPE html>
<html>
<head>
<title>preventDefault example</title>

<script>
js
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",
      );
    }
  }
}
html
</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③

Compatibilidade com navegadores

Report problems with this compatibility data on GitHub
desktopmobileserver
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
Deno
Node.js
preventDefault

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support