HTML | returnValue Event Property

It can set or retrieve a Boolean value which tells whether the current event is canceled or not.The returnValue Event property tells if the default action for this event has been prevented or not. The value is set true by default, it allows default action to occur.
If we set the default value to false it will prevent the default action.

Syntax:

event.returnValue = bool;
var booleanValue = event.returnValue;

Return value:
If the event has not been canceled the return value is true and the return value is false if the event has been canceled or the default has been prevented.



Example 1: This example attempts to cancel the onclick and onchange events.

filter_none

edit
close

play_arrow

link
brightness_4
code

<!DOCTYPE html>
<html>
  
<head>
    <title>returnValue event property</title>
    <style>
        h1 {
            color: green;
        }
          
        div {
            width: 500px;
            height: 200px;
            overflow: auto;
            border: 1px solid green;
        }
    </style>
  
</head>
  
<body>
    <center>
        <h1>GeeksforGeeks</h1>
        <script type="text/javascript">
            function WriteInformation(message) {
                var inform = document.getElementById("info");
                inform.innerHTML += message + "<br />";
                inform.scrollTop = inform.scrollHeight;
            }
  
            function CancelEvent(event, NameEvent) {
                if ('cancelable' in event) {
                   if (event.cancelable) {
                        event.preventDefault();
                        WriteInformation(
                          "The " + NameEvent + 
                          " event is canceled.");
                    } else {
                        WriteInformation(
                          "The " + NameEvent +
                          " event is not cancelable.");
                    }
                } else {
                    event.returnValue = false;
                    WriteInformation(
                      "The " + NameEvent +
                      " event is probably canceled.");
                }
            }
        </script>
        <input type="checkbox" 
               onclick="CancelEvent (event, 'onclick');" />
      Try to check this checkbox.
        <br />
        <br /> Select one of the one options.
        <select onchange="CancelEvent (event, 'onchange');">
            <option>Option 1</option>
            <option>Option2</option>
        </select>
        <br />
        <br />
  
        <div id="info" style=""></div>
    </center>
</body>
  
</HTML>

chevron_right


Output:

Example 2: It is similar to the last example, the difference is that it does not check the cancelable state of an event, it just attempts to cancel the onclick and onchange events.

filter_none

edit
close

play_arrow

link
brightness_4
code

<!DOCTYPE html>
<html>
  
<head>
    <title>returnValue event property</title>
    <style>
        h1 {
            color: green;
        }        
        body {
            text-align: center;
        }
    </style>
  
</head>
  
<body>
    <h1>GeeksforGeeks</h1>
    <script type="text/javascript">
        function WriteInformation(message) {
            var inform = document.getElementById("info");
            inform.innerHTML += message + "<br />";
            inform.scrollTop = inform.scrollHeight;
        }
  
        function CancelEvent(event, NameEvent) {
            if ('cancelable' in event) {
                if (event.cancelable) {
                    event.preventDefault();
                    WriteInformation(
                      "The " + NameEvent + 
                      " event is canceled");
                } else {
                    WriteInformation(
                      "The " + NameEvent +
                      " event is not cancelable");
                }
            } else {
                event.returnValue = false;
                WriteInformation(
                  "The " + eventName + 
                  " event is maybe canceled");
            }
        }
    </script>
    In this it 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 one of the one options.
    <select onchange="return false;">
        <option>First option</option>
        <option>Second option</option>
    </select>
</body>
  
</HTML>

chevron_right


Output:

Supported Browsers:

  • Google Chrome
  • IE
  • Edge
  • Opera
  • Apple Safari


My Personal Notes arrow_drop_up

Check out this Author's contributed articles.

If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.




Article Tags :
Practice Tags :


Be the First to upvote.


Please write to us at contribute@geeksforgeeks.org to report any issue with the above content.