HTML | returnValue Event Property

Last Updated : 18 May, 2019

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.

<!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>

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.

<!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> 