Why to "return false;"

Hi,
I have a very simple question: In many JS libraries we use return false; after the function, like

Effect.Appear("div"); return false;

what's the reason for this? What happens if I don't use?

 

http://letmegooglethatforyou.com/?q=return+false

 

That's actually an indication of a bad code. Usually this is done when you put some JavaScript code in a <a> hyperlink, so that the browser doesn't try to open the link. Why is this bad? Read here: http://en.wikipedia.org/wiki/Unobtrusive_JavaScript

 

That's an interesting read phper. I was wondering if you knew how I could implement that technique on my website.

Here is my JavaScript code:

<script type="text/javascript">
function goto(url)
{
	var selection = document.getElementById('location');
	
	if(selection.value != null)
	{
		document.location = url + document.getElementById('location').options[document.getElementById('location').selectedIndex].value;
	}
}
</script>

Code (markup):

And here is my <a href> code:

<div id="menu">
<a href="/directory/cd-players/" onclick="goto(this.href); return false">CD Players</a></div>

Code (markup):

That's just an example of one link in the DIV but I have about 50-60 links in total.

So basically I'd like to get rid of the "onclick" part in the <a href>, the css identifier for the links would be would be "#menu a" I assume. Or do I need to add a "class" atribute to the <a href> ?

 

funny.. you just tell the script to stop and return false .. and that's all..

 

This is how I'd do it:

HTML:

<div id="menu">
   <span id="cdplayers" style="clickable">CD Players</span>
</div>

HTML:

JavaScript:

window.onload = init;
function init () {
   document.getElementById("cdplayers").onclick = function() {
      goto("/directory/cd-players/");
   };
}

Code (markup):

CSS:

.clickable { cursor: pointer; }

Code (markup):

In the window.onload event, I usually call a separate function rather than creating an inline function (like the one used in the onclick event above) because there's potentially multiple things we want to do in the onload event (inline functions don't look that clean if it gets too long).

 

Even with unobtrusive js you need to return false or use preventDefault() if you want to prevent the default action.

This helps when you want to do a js action if the user has js, otherwise take them to the link.

 

an event handler that preventsDefault() (as MMJ said) is a far better way to go than to just return false; also, using inline js on a href elements IS bad practice. things like:

<a class='myclicker' href='#' onclick='somefunction(); return false;'>click</a>

...are so 20th century...

now, it's also bad because you end up with a "url.com/script.php#" despite of the return false, meaning that pressing back on the browser now warrants an extra click (small annoyances but still).

the correct way for this would be something like:

// under onload/domready of your framework...
// some selector direct for the link or all links of the same class
$$("a.myclicker").addEvent("click", function(e) {
    e.preventDefault(); 
    // ... and so forth.
});

PHP:

and then ... you can just... return false, you know. because the function warrants it. or you just want to exit a function. this is slightly more interesting to me since i tend to do it and would NOT consider it "bad practice" to return false when aborting, for example:

var showPopup(targetDivObject) {
    if (!targetDivObject)
        return false; 

    // continue as usual and do something
};

if (!showPopup($("blah")))
    alert("target layer missing...");

// or you may not realy care and just do... 
showPopup($("blah")); 

PHP:

however, I am not sure if it's the best way to go.

but to recap, returning false when exiting a function is fine, stopping an event is better when altering click events.