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

returnValue property (event)

Browser support:
Sets or retrieves a Boolean value that indicates whether the current event is canceled.
Not every event can be canceled.
You can get 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 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.
Note that Internet Explorer from version 9 started to support different event objects similarly to Firefox, Opera, Google Chrome and Safari. The event object passed to an event handler and the event object referred to by the window.event property are different in Internet Explorer from version 9 (except if the event handler is registered with the attachEvent method). The returnValue property is only supported by the window.event object.
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.returnValue;
You can find the related objects in the Supported by objects section below.
This property is read/write.

Possible values:

Boolean that indicates the return value state.
One of the following values:
false
The default action of the event is canceled.
true
Default. The default action of the event is not canceled.
Default: false.

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) {    // all browsers except IE before version 9
                    // 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 {  // IE before version 9
                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>
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>
Did you find this example helpful? yes no

Supported by objects:

Related pages:

External links:

User Contributed Comments

Post Content

Post Content