In order to access this site you need to enable JavaScript!

You are here: Reference > JavaScript > client-side > event handling > methods > preventDefault (event)

preventDefault method (event)

Browser support:

9

Cancels the current event.

Not every event can be canceled.

You can check whether an event can be canceled with the cancelable property in all browsers except in Internet Explorer before version 9. Although the cancelable property exists in Firefox, it always returns true, regardless of the cancelable state of the event. There is no way to determine whether an event can be canceled in Internet Explorer before version 9.

If an event is cancelable, you can use the preventDefault method and the returnValue property to cancel the event. When an event is canceled, the default action that belongs to the event will not be executed. For example, when the onclick event (the onclick event is cancelable) is canceled for a checkbox, then clicking on the checkox does not change its checked state.

Note that the use of the preventDefault method and the returnValue property on a non-cancelable event does not cause an error. When an event handler returns false, the event will be canceled. You can use it instead of the preventDefault method and the returnValue property. See Example 2 below.

The properties and methods mentioned above do not affect the propagation of events. If you need to prevent the propagation of an event in the DOM hierarchy, use the cancelBubble property and the stopPropagation method.

Syntax:

object.preventDefault ( );

You can find the related objects in the Supported by objects section below.

Return value:

This method has no return value.

Example HTML code 1:

This example tries to cancel the onclick and onchange events:

<head>
    <script type="text/javascript">
        function WriteInfo (message) {
            var info = document.getElementById ("info");
            info.innerHTML += message + "<br />";
            info.scrollTop = info.scrollHeight;
        }

        function CancelEvent (event, eventName) {
            if ('cancelable' in event) {
                    // in Firefox, the cancelable property always returns true,
                    // so the cancelable state of the event cannot be determined
                if (event.cancelable) {
                    event.preventDefault ();
                    WriteInfo ("The " + eventName + " event is canceled.");
                }
                else {
                    WriteInfo ("The " + eventName + " event is not cancelable.");
                }
            }
            else {
                event.returnValue = false;
                WriteInfo ("The " + eventName + " event is probably canceled.");
            }
        }
    </script>
</head>
<body>
    <input type="checkbox" onclick="CancelEvent (event, 'onclick');" />
    Try to check this checkbox.
    <br /><br />

    Select an item from the following selection list.
    <select onchange="CancelEvent (event, 'onchange');">
        <option>First option</option>
        <option>Second option</option>
    </select>
    <br /><br />
    
    <div id="info" style="width:300px; height:150px; overflow:auto; background-color:#e0a0d0;"></div>
</body>

Copy Code

Preview

Syntax Highlighter

Did you find this example helpful? yes no

Example HTML code 2:

This example is similar to the previous one, but it does not check the cancelable state of an event, just tries to cancel the onclick and onchange events:

<body>
    This example cancels the onclick event for the checkbox <br />
    and the onchange event for the selection list below.<br />
    The onclick event is cancelable, the onchange is not.
    <br /><br />
    <input type="checkbox" onclick="return false;" />
    Try to check this checkbox.
    <br /><br />

    Select an item from the following selection list.
    <select onchange="return false;">
        <option>First option</option>
        <option>Second option</option>
    </select>
</body>