why 'event.preventDefault();' is better than 'return false;'

event.preventDefault()

If this method is called, the default action of the event will not be triggered. You should try and use this instead of "return false;"

Return false is actually doing three things when invoked:

  1. It invokes event.preventDefault(), which is what you wanted.
  2. It invokes event.stopPropagation(), which may be what you wanted. But any other click events in (for instance) wrapping divs won't get fired.
  3. It stops callback execution and returns immediately when called.

Another example:

$('x').click(function(e){
  // custom code
  //but this line causes a runtime error
  return false;
});

Whoops, if you throw an error before you hit return false, you are rolling the dice, because the return false never executes. What happens if the click function is attached to a form submit button? You will submit the form. That's probably not what you want.

Now try this:
$('x').click(function(e){
  e.preventDefault();

  // custom code
  //but this line causes a runtime error
});

Because you placed the preventDefault() invocation at the top of the function, you have shut down the default behavior of the element. In other words, even though you get a runtime error, you haven't screwed up your form button, and the form doesn't submit.

No comments:

Post a Comment