Grow your CSS skills. Land your dream job.

The difference between ‘return false;’ and ‘e.preventDefault();’

Published by Chris Coyier

Have you ever seen those two things (in the title) being used in jQuery? Here is a simple example:

$("a").click(function() {
   $("body").append($(this).attr("href"));
   return false;
}

That code would append the href attribute as text to the body every time a link was clicked but not actually go to that link. The return false; part of that code prevents the browser from performing the default action for that link. That exact thing could be written like this:

$("a").click(function(e) {
   $("body").append($(this).attr("href"));
   e.preventDefault();
}

So what's the difference?

The difference is that return false; takes things a bit further in that it also prevents that event from propagating (or "bubbling up") the DOM. The you-may-not-know-this bit is that whenever an event happens on an element, that event is triggered on every single parent element as well. So let's say you have a box inside a box. Both boxes have click events on them. Click on the inner box, a click will trigger on the outer box too, unless you prevent propagation. Like this:

So in other words:

function() {
  return false;
}

// IS EQUAL TO

function(e) {
  e.preventDefault();
  e.stopPropagation();
}

It's all probably a lot more complicated than this and articles like this probably explain it all a lot better.

Comments

  1. I’ve never known what “return false” did until now. Does it always prevent the default action, or does it depend on the context?

    • John Leverage

      Dude are you new to web development?
      return false is one of the oldest sentences in programming.
      god bless all of you “web developers” who dont know a thing about porgramming.

    • From following the link in his name, I would imagine he might be a film guy, and I wouldn’t necessarily expect him to know anything at all about web dev.

    • Christian

      The first reply was completely unnecessary. The reason people come to CSS-Tricks is to learn, not to be ridiculed by those who apparently already know everything.

      I’ve already learned a TON of just basic things from Chris, and I’m sure others (professionals, even) have experienced the same.

  2. Thiago Menezes

    Yeah, neither did I! I guess, then, that it is wiser to just prevent the default from happening than stopping all the propagation (follow the flow, kind of…)

  3. Thanks Chris for clearing the difference. I always thought that they are the same :P

  4. I never understood “Bubbling Up” until now!

    Does this imply that the return false method is faster or less js intensive?

  5. feroc1ty

    If there is javacsript error in page, using return false browser will perform default action. That can be avoid using preventDefault()
    Example:

    $('a').click( function(e){
       $(this).css("background", "green");
       err();  // err is not defined, so javascript will throw error, and browser will ignore rest of the code (return false). Browser will perform default action.
       return false;
    });
    $('a').click( function(e){
       e.preventDefault();
       $(this).css("background", "green");
       err();  // err is not defined, so javascript will throw error, and browser will ignore rest of the code. We already called preventDefault() so browser will not perform default action.
    });
    • Gringer
      Permalink to comment#

      Nice.

      This is a good example emphasizing the flexibility of e.preventDefault(). Namely that it can be called at ny time. Code can be put all before, all after or even around it. (like it in if() statement)

  6. shorty42

    if you got 2 handlers on an element, return false prevents the execution of the second handler also. Well I think return false is the only way you can prevent execution of additional handlers on the same element.

    • shorty42

      At least I found it. The correct way return false works is (jQuery):

      function() {
      return false;
      }

      // IS EQUAL TO

      function(e) {
      e.preventDefault();
      e.stopImmediatePropagation();
      }

  7. I was wondering about that just the other day!! I was using return false; almost always and never knew the difference between them.

  8. Never knew that, thanks for the information.

  9. Jay

    Nice. Now that I’ve learned something for the day, I’m going back to sleep. :)

  10. Handy tip, cheers Chris :)

  11. Skwal

    Very useful ! Thanks. I’m gonna use e.preventDefault() a lot more now :)

  12. This might be a little overkill but to play it safe maybe try this:

    $("a").click(function(e) {
       try {
         e.preventDefault();
         //do stuff here
         return false;
       } catch(err) {
          return false;
    }
  13. e.preventDefault(); can actually be used to create drag & drop interfaces on touch screen devices to prevent the default scroll or zoom behavior. It’s pretty nice.

  14. Permalink to comment#

    As always Chris, great article.
    I always used return false;
    I never even knew about e.preventDefault();
    So thanks again! Keep it going!!

  15. I want to know more about javascript. But I haven’t find the simple and effective way to learn. Somebody can help me ?

  16. zhoujing
    Permalink to comment#

    说的真好。就是这么回事。i am from China

  17. Well that was well worth the short read. I am not sure why, but I always used preventDefault. I believe I will go with return false now, as that should be the faster and more efficient way. Nice post Chris.

  18. I usually use return false but I think feroc1ty and Mark have given great examples for when this isn’t the correct choice.

  19. Eddy
    Permalink to comment#

    Thanks Chris! I still have one question, what exactly is “e”?

    • Is is an arbitrary variable name.

      $("a").click(function(e) {
        e.preventDefault();
      }
      $("a").click(function(frizzlefrazzle)  {
        frizzlefrazzle.preventDefault();
      }
    • Danish Aziz Satkut
      Permalink to comment#

      ‘e’ is a name of an argument variable. This variable is a jQuery event object, that contains all information about the event. All event handlers in jQuery receive it as first argument.

      To dive deeper, stopPropagation, preventDefault are methods of this event object.

      More Details

  20. event.preventDefault();
    Prevents the for example click event to be triggered, but if the selector used for the click event is in a scope of an other function event.preventDefault() will not work, as the event is being “bubbled” upwards in the scope, while event.stopPropagation will ‘kill’ the event even in a further scope…

    I prefer using event.stopPropagation() instead of event.preventDefault() to prevent event bubbling

  21. Marcus
    Permalink to comment#

    Example for a delete link and JS confirmation:

    <a href="cmd.php?delete=12345" class="delete">Delete</a>
    

    JS:

    $('.delete').click(function(){
        return confirm('Delete?')
    });
    

    or

    $('.delete').click(function(){
        if( ! confirm('Delete?') ){
            e.preventDefault();
        }
    });
    
  22. Hello Chris.
    I’m just working on some example where I have to attach “active” class on some div, and detach that class on second click. But, I want not to detach that “active” class if I click on one of the links inside of that div. Is “return false” for those inside links the best solution for me? It works, I’m just wondering if it’s the best solution.

  23. There’s a major misconception being put across here about the use of return false in events.

    jQuery handles return false as an internal flag — using it to mean “prevent default and stop propagation”. Vanilla event listeners do not handle it the same way.

    If you’re not using jQuery then return false in addEventListener is nothing but a legacy hangover — a shorthand for e.returnValue = false, which is deprecated syntax. It won’t behave consistently between browsers, but you never need to use it anyway.

    If you’re not using jQuery, don’t return at all, use any or all of: preventDefault() to block a default action, stopPropagation() to stop the event bubbling, or stopImmediatePropagation() to stop the event being dispatched to other handlers on the same element (though that last one is not as widely supported).

    If you are using jQuery, return false is equivalent to calling e.preventDefault(); e.stopPropagation();

  24. (i.e. return false in jQuery is just a proprietary shortcut, it has no meaning of its own)

  25. Dom W
    Permalink to comment#

    It might be worth mentioning that using return false in this manner is deprecated in current versions of jQuery and results in an error being logged to the console (something which will cause older versions of IE to throw an error as console.log() isn’t supported ). You should use e.preventDefault().

  26. Joel
    Permalink to comment#

    The example doesn’t seem to work at all on Firefox 24.6.0?

This comment thread is closed. If you have important information to share, you can always contact me.

*May or may not contain any actual "CSS" or "Tricks".