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

This article needs a technical review. How you can help.

 

Summary

Cancels the event if it is cancelable, without stopping further propagation of the event.

Syntax

event.preventDefault();

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>
    <input type="checkbox" id="my-checkbox" />
    <label for="my-checkbox">Checkbox</label>
</form>

</body>

<script>
    function stopDefAction(evt) {
        evt.preventDefault();
    }
    document.getElementById('my-checkbox').addEventListener( 'click', stopDefAction, false );
</script>

</html>

You can see preventDefault in action here.

The following example demonstrates how invalid text input can be stopped from reaching the input field with 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>

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.

preventDefault doesn't stop further propagation of the event through the DOM. event.stopPropagation should be used for that.

Specifications

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