Wednesday 30 November 2011

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();"> 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!