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:
- Preventing the default action of the event, such as when you click a link and the browser follows it.
- 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:
...it prevents the default action but doesn't stop propagation. Note that you need that<div onclick="return functionName();">
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:
Try it here. As before,document.getElementById("someId").onclick = functionName;
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 thepreventDefault
andstopPropagation
functions on theEvent
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!
Essential information here. We switched from a jquery-heavy website to an angular website (I hesitate to call it an app proper) and this got me, but I remembered this post and it saved me a lot of time.
ReplyDeleteuseful and quite right
ReplyDeleteThanks for sharing this information. So cool! Concrete company Apex NC
ReplyDelete