How to use "return false;" in Javascript (or jQuery)

Question

I was wondering about the use of return false; because…

⋅ Sometimes I see functions like that:

function foo(){
  ⋅⋅⋅
  return false;
}

⋅ Sometimes I see the calling of functions like that:

<div onclick="foo(); return false;"></div>

⋅ Sometimes I see both of the above,

⋅ Sometimes I see none of the above.

(I know about the topic What's the effect of adding 'return false' to a click event listener?, but that seems to answer only to my point #2, or am I wrong?)

So I ended up with questions about it.
What is the right way to use return false;?
And when is it necessary to do so?

When using jQuery, is the right way or the necessity modified ?

Thanks in advance for any answer.

Possible duplicate of [What's the effect of adding 'return false' to a click event listener?](https://stackoverflow.com/questions/128923/whats-the-effect-of-adding-return-false-to-a-click-event-listener) — Joery, Apr 11 '18 at 12:16
Depends very much on what you want to do. In jQuery it can be used to break out of an `each`, in that html snippet it is used to not do anything else after `foo` on click, in the function it just returns false. — Federico klez Culloca, Apr 11 '18 at 12:17
You can use the html way then you don't need to return false from the function. Or return false from the function and in the html just return the value you get from the function, which is false. — Mosh Feu, Apr 11 '18 at 12:17
@RadonirinaMaminiaina, Thank you for your comment. Is it considered bad practice only for the fact that the JS should be entirely at the same place? — Takit Isy, Apr 11 '18 at 14:22
Does someone know why my question was downvoted? So that I could correct it, if necessary. — Takit Isy, Apr 11 '18 at 14:22

score 2 · Accepted Answer · edited Jul 15 '20 at 07:34

In an old-style onxyz-attribute event handler (commonly called "DOM 0" because they're not specified), returning false prevents the default action (more in this question). For instance, for a link, it prevents following the link; for a form's onsubmit, it prevents form submission.

So there are multiple answers to your "what's the correct way" question:

If you want the function foo to determine whether the default action occurs, use onclick="return foo()" and have foo return false to prevent the default, or return anything else (or just return;, which will effectively return undefined) to allow it.
If you always want the default prevented, use onclick="foo(); return false;" (although that will fail to prevent the default if foo throws an exception).
On any vaguely-modern browser, if you always want the default prevented even if foo throws an exception: onclick="event.preventDefault(); foo();" (yes, this even works on Firefox, which doesn't have the global event variable — because onxyz handlers execute in a scope with a local event variable).

But perhaps mostly:

Old-style "DOM 0" handlers are generally not best practice; instead, use modern event handling (addEventListener, attachEvent if you need to support obsolete IE versions).

Take your choice. :-)

Ann MB · Answer 2 · 2018-04-11T12:48:38.433

First, I do not recommend inline JavaScript.

You should use addEventListener.

Example :

document.getElementById('yourdiv').addEventListener('click', function(){
  foo(); 
  return false;
});

OR

document.getElementById('yourdiv').addEventListener('click', function(){
  foo(); 
});

with function foo() { return false }

depending on your needs

First case :

function foo() {
  return false;
}

The function foo is called, and this very function returns false. So you can get the false by doing :

var isitfalse = foo() --> isitfalse will be defined to false

OR

if (!isitfalse) {
   alert('Yes it\'s false')
}

Second case :

<div onclick="foo(); return false;"></div>

The action onclick will call the foo function, then onclick will call return false. So it's different from the first case where it's your function that returns false

jQuery

return false or return true or return what-ever-you-want works the same in jQuery, same way to use it

Other thing to know :

If you ask a function to return anything, the function won't go further.

function foo() {

  if (2 > 1) { return something }

  alert()

}

In this case, you'll never see the alert

score -1 · Answer 3 · answered Apr 11 '18 at 12:19

-1

Functions with no explicit return value will always return undefined. In case of event handlers, you return false to avoid the default browser behavior. See What's the effect of adding 'return false' to a click event listener?

answered Apr 11 '18 at 12:19

Cristian S.

937
5
13

How to use "return false;" in Javascript (or jQuery)

3 Answers3