Event.preventDefault()
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. |
License
© 2016 Mozilla Contributors
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-us/docs/web/api/event/preventdefault