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

You are here: Reference > JavaScript > client-side > event handling > properties > cancelable (event)

cancelable property (event)

Browser support:

9

Returns a Boolean value that indicates whether the current event can be canceled or not.

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 checkbox 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 or the stopPropagation method.

Syntax:

object.cancelable;

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

This property is read/write.

Possible values:

Boolean that indicates whether the event can be canceled.

One of the following values:

false

The event is not cancelable.

true

The event is cancelable.

Default: this property has no default 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>