CODEWITHSUNDEEP
javascript
Don
Don

Reputation: 79

Why is return used in onclick event handler?

Why is "return" used in the onclick even handler below, seems to function with or without the return specification in the onclick event for the buttons? 

input type="radio" name="radCPUSpeed" value="6 Ghz"
                       onclick="return radCPUSpeed_onclick(2)"

The function does not seem to do anything with it, why do you need return in the input declaration above?

function radCPUSpeed_onclick(radIndex)
   {
       var returnValue = true;
       if (radIndex == 1)
       {
           returnValue = false;
           alert("Sorry that processor speed is currently unavailable");
           // Next line works around a bug in IE that doesn't cancel the
           // Default action properly
           document.form1.radCPUSpeed[radCpuSpeedIndex].checked = true;
       }
       else
       {
           radCpuSpeedIndex = radIndex;
       }
       return returnValue;
   }

Upvotes: 2

Views: 2862

Answers (3)

Mathews Mathai
Mathews Mathai

Reputation: 1707

Basically,the value or whatever comes after the '=' sign is a function in case of an event handler. As a reason,return must be used so that the function returns a boolean value to the event handler-onclick,onsubmit etc.

onclick="return radCPUSpeed_onclick(2)

The above code can be interrupted as: onclick="function(){radCPUSpeed_onclick(2)} Therefore,whatever comes after the equal to sign is actually inside a function and a return statement is required.

Upvotes: 0

Tim Down
Tim Down

Reputation: 324657

Returning false from an event handler function will prevent the default browser behaviour associated with the event. Returning any other value (including undefined, which is what is returned if no return statement is executed) will not. Importantly, returning false does not prevent the event from bubbling up the DOM tree, and an event handler attached to a node higher up the DOM tree will still be executed.

Note also that this does not apply to event listener functions attached via addEventListener or attachEvent. The return value in such functions has no effect.

Upvotes: 5

ChaosPandion
ChaosPandion

Reputation: 78282

When you return false from any event handler the event will not bubble up. So lets say normally this button will submit a form, when you return false this will not happen. Essentially it will prevent the default action of the event.

Upvotes: 2

Related Questions