MDN’s new design is in Beta! A sneak peek: https://blog.mozilla.org/opendesign/mdns-new-design-beta/

 

The Event interface's preventDefault() method tells the user agent that if the event goes unhandled, its default action should not be taken as it normally would be. The event continues to propagate as usual with only the exception that the event does nothing if no event listeners call stopPropagation(), which terminates propagation at once.

Syntax

Event.preventDefault();

Parameters

None.

Return value

undefined.

Example

Toggling a checkbox is the default action of clicking on a checkbox. This example demonstrates how to prevent that from happening:

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

<body>
    <p>Please click on the checkbox control.</p>
    <form>
        <label for="id-checkbox">Checkbox</label>
        <input type="checkbox" id="id-checkbox"/>
    </form>
    <script>
        document.querySelector("#id-checkbox").addEventListener("click", function(event){
            alert("preventDefault will stop you from checking this checkbox!")
            event.preventDefault();
        }, false);
    </script>
</body>
</html>

You can see preventDefault() in action here.

Stopping keystrokes from reaching an edit field

The following example demonstrates how invalid text input can be stopped from reaching the input field with preventDefault(). Of course, you should usually use CSS validation instead.

HTML

Here's the form:

<div class="container">
  <p>Please enter your name using lowercase letters only.</p>
  <form>
    <input type="text" id="my-textbox">
  </form>
</div>

CSS

We use a little bit of CSS for the warning box we'll draw when the user presses an invalid key:

.warning {
  border-radius:2px;
  border-style:solid;
  border-width:2px;
  padding:10px;
  position:absolute;
  background-color:#fbd8d4;
  border-color:#f39389;
  color:#3b3c40
  border-width:2px;
  font-style:normal;
}

JavaScript

And here's the JavaScript code that does the job. First, we need to listen for keypress events:

var myTextbox = document.querySelector('#my-textbox');
myTextbox.addEventListener( 'keypress', checkName, false );

The checkName() function, which looks at the key and decides whether or not to allow it, follows:

function checkName(evt) {
  var charCode = evt.charCode;
  if (charCode != 0) {
    if (charCode < 97 || charCode > 122) {
      evt.preventDefault();
      displayWarning(
        "Please use lowercase letters only."
        + "\n" + "charCode: " + charCode + "\n"
      );
    }
  }
}

The displayWarning() function presents a notification of a problem. It's not an elegant function but does the job for the purposes of this example:

var warningBox = null;
var warningTimeout;

function displayWarning(msg) {
  if (warningBox) {
    warningBox.innerHTML = msg;
    window.clearTimeout(warningTimeout);
  } else {
    warningBox = document.createElement("div");
    warningBox.className = "warning";
    warningBox.innerHTML = msg;
    myTextbox.parentNode.insertBefore(warningBox, myTextbox);
  }

  warningTimeout = window.setTimeout(function() {
      warningBox.parentNode.removeChild(warningBox);
      warningBox = null;
      warningTimeout = -1;
    }, 2000);
}

Result

Here is the result of the preceding code:

Notes

Calling preventDefault() during any stage of event flow cancels the event, meaning that any default action normally taken by the implementation as a result of the event will not occur.

Note: As of Gecko 6.0, calling preventDefault() causes the Event.defaultPrevented() property's value to become true.

You can use Event.cancelable to check if the event is cancelable. Calling preventDefault() for a non-cancelable event has no effect.

Specifications

Specification Status Comment
DOM
The definition of 'Event.preventDefault()' in that specification.
Living Standard  
Document Object Model (DOM) Level 2 Events Specification
The definition of 'Event.preventDefault()' in that specification.
Recommendation Initial definition.