The true story on return false

In JavaScript event handlers, you'll frequently see return false; at the end. Why? What does it do? The answer is: It depends. Before we get into the details, there are basically two things it could be doing:

1. Preventing the default action of the event, such as when you click a link and the browser follows it.
2. Stopping propagation of the event to ancestor elements.

So which does return false do? Just one, neither, or both:

• DOM0 handlers: In an old-style DOM0 handler, hooked up via an attribute like this:

  <div onclick="return functionName();">

  ...it prevents the default action but doesn't stop propagation. Note that you need that return in the attribute. Try it here.
• DOM0 handlers (again): The same is true of an old-style DOM0 handler hooked up via the reflected property for the attribute, like this:

  document.getElementById("someId").onclick = functionName;

  Try it here. As before, return false; prevents the default action but doesn't stop propagation.
• DOM2 handlers: In a proper DOM2 handler hooked up via addEventListener, like this:

  document.getElementById("someId").addEventListener("click", functionName, false);

  ...return false does absolutely nothing. Instead, use the preventDefault and stopPropagation functions on the Event object your handler receives as an argument. Try it here (be sure to use a non-Microsoft browser, or use IE9 or higher).
• Microsoft DOM2-ish handlers: In a DOM2-ish handler hooked up with Microsoft's attachEvent function, like this:

  document.getElementById("someId").attachEvent("onclick", functionName);

  ...return false prevents the default but not propagation, just like a DOM0 handler. Try it here (using IE8 or lower).
• jQuery handlers: Event handlers hooked up with jQuery get a twofer: return false both prevents the default and stops propagation. It's a jQuery thing.

Happy handling!