如何使用“返回假”； 在 Javascript（或 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.

Answer 1

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. :-)

Answer 2

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

Answer 3

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?