What's the Effect of Adding 'Return False' to a Click Event Listener

What's the effect of adding 'return false' to a click event listener?

The return value of an event handler determines whether or not the default browser behaviour should take place as well. In the case of clicking on links, this would be following the link, but the difference is most noticeable in form submit handlers, where you can cancel a form submission if the user has made a mistake entering the information.

I don't believe there is a W3C specification for this. All the ancient JavaScript interfaces like this have been given the nickname "DOM 0", and are mostly unspecified. You may have some luck reading old Netscape 2 documentation.

The modern way of achieving this effect is to call event.preventDefault(), and this is specified in the DOM 2 Events specification.

JavaScript: onclick and return false

function preload () {
    // some code
    return false;
}

<a href="#" onclick="return preload('12345');">Click</a>

or use addEventListener

For example:

<a href="#" class="link">Click</a>
<script type="text/javascript">
    document.querySelector('.link').addEventListener('click', function (e) {
        // some code;

       e.preventDefault();
    }, false);
</script>

where does the return of onclick=return false go?

You are disabling the default function of the click event by returning false on click.

for example :

<a id="btn_save" href="http://www.google.com" onclick="return false;" title="">Save</a>

Even though the points to google.com, when you click the link , it won't take you to google.com. i.e. the default action is returned false.

It's similar to event.preventDefault()

In JavaScript event handling, why return false or event.preventDefault() and stopping the event flow will make a difference?

hopes this code can explain it to you...

html

<div>
<a href="index.html" class="a1">click me</a>
<a href="index.html" class="a2">click me</a>
</div>​

jquery

$('div').click(function(){
    alert('I am from <div>');
});

$('a.a1').click(function(){
    alert('I am from <a>');
    return false; // this will produce one alert
});

$('a.a2').click(function(e){
    alert('I am from <a>');
    e.preventDefault(); // this will produce two alerts
});​

demo

or

$('div').click(function(){
    alert('I am from <div>');
});

$('a').click(function(){
    alert('I am from <a>');
});

$('a.a1').click(function(){
    alert('I am from <a class="a1">');
    return false;
});

$('a.a2').click(function(e){
    alert('I am from <a class="a2">');
    e.preventDefault();
});​

demo 2

`return false` in an event handler attached by addEventListener or element.on*

So my unfruitful search suddenly became fruitful.

var mouse_input = function (evt) {
    evt.preventDefault();
}

document.addEventListener('contextmenu', mouse_input, false);

Works for Safari, Firefox, Opera. preventDefault() stops the usual actions from happening. I had to change the event that was listened for to accommodate for Safari and it is more logical anyway. Further information: functions that implement EventListener shouldn’t return values so return false had no effect.

What's the effect of adding void(0) for href and 'return false' on click event listener of anchor tag?

About void(0):

As defined by @rahul in What does "javascript:void(0)" mean?

The void operator evaluates the given expression and then returns undefined.

The void operator is often used merely to obtain the undefined primitive value, usually using “void(0)” (which is equivalent to “void 0”). In these cases, the global variable undefined can be used instead (assuming it has not been assigned to a non-default value).

"The reason you’d want to do this with the href of a link is that normally, a javascript: URL will redirect the browser to a plain text version of the result of evaluating that JavaScript. But if the result is undefined, then the browser stays on the same page. void(0) is just the smallest script possible that evaluates as undefined."

The return false:

Acts like a event.preventDefault negating it.

If you call a function like:

<button type="submit" onclick="return some_function();"></button>

And the some_function has a return false; the submit will not happen if you call it.. But a return true will continue with the submit when it's called.

In your case, you'll not be redirected when you click the link.

Why onclick is not working without return false

Why onclick method is not working without return false?

The default action of button inside the form is to submit the form when you click on the button. To prevent this from happening you need to use e.preventDefault() or return false on the button click.

Why the values disappear?

When the form is submitted the page is redirected to the URL where form is submitted. As the action attribute is not provided, the form is submitted to the same page. And as the default values are not set the values are cleared when the page is reloaded.

How to solve the problem

You can stop this from happening by using return false; in the click event handler function as the last statement and adding return before the onclick attribute before the function in the HTML.

One more thing you forgot to do is to cast the string to Number when the values are read from the DOM element. Otherwise + will be used as string concatenation operator and the result will be a joined string.

You can cast the string to number by putting +(unary + operator) before the string.

Updated fiddle: http://jsfiddle.net/tusharj/ufe7aqhw/

function addNumbers() {  var firstNumber = +document.getElementById('first').value;  var secondNumber = +document.getElementById('second').value;
  document.getElementById('result').value = firstNumber + secondNumber;
  return false;}

<form id="form1" method="POST">  <table style="border:1px solid black">    <tr>      <td>First Number</td>      <td>        <input type="text" id="first">      </td>    </tr>    <tr>      <td>Second Number</td>      <td>        <input type="text" id="second">      </td>    </tr>    <tr>      <td>Result</td>      <td>        <input type="text" id="result">      </td>    </tr>    <td>      <button id="btn" value="Add" onClick="return addNumbers();">Add</button>    </td>  </table></form>