SummaryEdit

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

SyntaxEdit

event.preventDefault();

ExampleEdit

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>

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

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:

NotesEdit

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.

SpecificationsEdit

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

Document Tags and Contributors

Tags: 
 Contributors to this page: cvrebert, gonubana, fscholz, teoli, MHasan, Pettay, Delapouite, kscarfone, jswisher, billbeteille, rashidtherash, Kartik_Chadha, Shraddha_Magdum, Sheppy, ethertank, AMIB, katspaugh, ziyunfei, MatrixFrog, Matej Lednar, Kohei, Mgjbot, Jabez, Nickolay, Ptak82, Dria, Waldo, Serkan, JesseW
 Last updated by: cvrebert,