1

Should I return false; every function that actually needs an action from the user or the browser to trigger?

For example:

$('myDiv').click(function(){ ... });

or

function myFunction(){ ... }

This second one would later appear below a click function as the first one.

This question is for both JQuery and pure Javascript.

gespinha
  • 7,968
  • 16
  • 57
  • 91

3 Answers3

4

Using return false will prevent the calling of further listeners, and also it default event (such as leaving the page on clicking a link). If that is what to what, then return false, otherwise don't.

With e.preventDefault() further listeners will still be called, but the default reaction won't be trigger ("don't leave the page, when a link was clicked").

If you do neither, a later called listener can stil use e.preventDefault() and/or return false.

Using jQuery, there is no need to do both (e.preventDefault(); return false;). JQuery will call preventDefault for you, if you return false.

As for default event of links, I found href="javascript:void(0)" to work the best; even if JavaScript is deactivated.

Kijewski
  • 25,517
  • 12
  • 101
  • 143
  • What is the "default event" of `click` in JQuery, for example? Just to clarify. – gespinha Oct 31 '13 at 23:43
  • Depends™. The default event of a link is to follow the `href`, the default event of a button is to submit a form, and so on. Clicking a mere `div` won't trigger a default action. – Kijewski Oct 31 '13 at 23:45
  • And what listeners could be "further" that are not prevented with `e.preventDefault()`? – gespinha Oct 31 '13 at 23:49
  • Let's give it a try: http://jsfiddle.net/t82Xw/. If you assign two listener functions to an element, the first bound function will be called first. You may have an `if (condition) return false;` or something similar in the first function. The former listeners may prevent latter ones from seeing the event. It is seldom needed (I only got to use it in made up test cases), but it I guess one might dearly miss the option to stop delegation if it was missing. – Kijewski Oct 31 '13 at 23:58
  • Oh, I understand now. So in the a `.click(function(){ ... });` that is assigned to an `a` element that has an `href` value of `javascript:void(0)`, both `return false;` and `e.preventDefault();` are pretty useless, because I am already preventing the default event with `javascript:void(0);`, right? – gespinha Nov 01 '13 at 00:01
  • Oh, now I understand. Both of these methods are most often used when, for example an `a` element has an `href` value of `#`? – gespinha Nov 01 '13 at 00:03
  • Yes, a `href="#"` lets the user jump to the top of the page if the default action was not prevented (rather useless default action I might say). Most often I use `$('…').click(function () { setTimeout(actualHandler, 0); return false; });` because it makes debugging much more easy. If your `actualHandler` throws an error (errors tend to happen), it will still not to follow the `href`. Having `href="javascript:void(0)"` has a further advantage over `href="#"` of being middle click safe. – Kijewski Nov 01 '13 at 00:07
0

No, that will make the event fail to perform its normal duty.

StackSlave
  • 10,613
  • 2
  • 18
  • 35
  • "… fail to perform its normal duty", most likely that is exactly what $USER wants in 83% of cases … – Kijewski Oct 31 '13 at 23:38
  • Well, I ceased to read questions verbatim, and try to empathize with the OPs now. (Problem is that my mind often seems to work differently from that of other users ;-) ) – Kijewski Oct 31 '13 at 23:49
0

you can use event.preventDefault() anywhere in the function instead of return false.

$('#some-id').click(function(e) {
  e.preventDefault();
  //  …; 
});

and for simple javascript:

document.getElementById('some-id').onclick = function(e) {
  e.preventDefault();
  //  …; 
};

It seems you're talking about event which have already a default behaviour (like the <a> element). I answered that way. but for element which haven't any, it's not necessary

Asenar
  • 6,732
  • 3
  • 36
  • 49
  • What is the difference between `return false;` and `e.preventDefault();`? – gespinha Oct 31 '13 at 23:30
  • `e.preventDefault()` "prevent the default behaviour", and `return false` means something like "ok, the function returned false, so I will not do the things I usually do" – Asenar Oct 31 '13 at 23:33
  • @GEspinha, see [the answers to this SO question](http://stackoverflow.com/questions/1357118/event-preventdefault-vs-return-false). – Louis Oct 31 '13 at 23:35