event preventDefault vs return false

Question

When I want to prevent other event handlers from executing after a certain event is fired  I can use one of two techniques  I ll use jQuery in the examples  but this applies to plain-JS as well   1  event preventDefault       a   click function  e           custom handling here     e preventDefault          2  return false     a   click function             custom handling here     return false        Is there any significant difference between those two methods of stopping event propagation   For me  return false  is simpler  shorter and probably less error prone than executing a method  With the method  you have to remember about correct casing  parenthesis  etc    Also  I have to define the first parameter in callback to be able to call the method  Perhaps  there are some reasons why I should avoid doing it like this and use preventDefault instead  What s the better way

User · Answer

e preventDefault     It simply stops the default action of an element      Instance Ex  -   prevents the hyperlink from following the URL  prevents the submit button to submit the form  When you have many event handlers and you just want to prevent default event from occuring   amp  occuring from many times  for that we need to  use  in the top of the function         Reason -   The reason to use e preventDefault    is that in our code so something goes wrong in the code  then it will allow to execute the link or form to get submitted or allow to execute or allow whatever action you need to do   amp  link or submit button will get submitted  amp  still allow further propagation of the event    x000D   x000D   lt  DOCTYPE html gt  x000D   lt html lang  en  dir  ltr  gt  x000D      lt head gt  x000D         lt meta charset  utf-8  gt  x000D         lt title gt  lt  title gt  x000D      lt  head gt  x000D      lt body gt  x000D         lt script src  https   ajax googleapis com ajax libs jquery 2 1 1 jquery min js  gt  lt  script gt  x000D         lt a href  https   www google com  onclick  doSomethingElse    gt Preventsss page from redirect lt  a gt  x000D         lt script type  text javascript  gt  x000D           function doSomethingElse    x000D             console log  This is Test       x000D             x000D              a   click function e   x000D            e preventDefault     x000D               x000D         lt  script gt  x000D      lt  body gt  x000D   lt  html gt  x000D   x000D   x000D    return False   It simply stops the execution of the function      return false   will end the whole execution of process      Reason -   The reason to use return false  is that you don t want to execute the function any more in strictly mode    x000D   x000D   lt  DOCTYPE html gt  x000D   lt html lang  en  dir  ltr  gt  x000D      lt head gt  x000D         lt meta charset  utf-8  gt  x000D         lt title gt  lt  title gt  x000D      lt  head gt  x000D      lt body gt  x000D         lt a href     onclick  returnFalse     gt Blah lt  a gt  x000D         lt script type  text javascript  gt  x000D           function returnFalse    x000D           console log  returns false without location redirection       x000D               return false  x000D               location href    http   www google com    x000D            x000D             x000D         lt  script gt  x000D      lt  body gt  x000D   lt  html gt  x000D   x000D   x000D

User · Answer

From my experience  there is at least one clear advantage when using event preventDefault   over using return false  Suppose you are capturing the click event on an anchor tag  otherwise which it would be a big problem if the user were to be navigated away from the current page  If your click handler uses return false to prevent browser navigation  it opens the possibility that the interpreter will not reach the return statement and the browser will proceed to execute the anchor tag s default behavior      a   click function  e         custom handling here       oops   runtime error   where oh where will the href take me     return false        The benefit to using event preventDefault   is that you can add this as the first line in the handler  thereby guaranteeing that the anchor s default behavior will not fire  regardless if the last line of the function is not reached  eg  runtime error       a   click function  e      e preventDefault          custom handling here       oops   runtime error  but at least the user isn t navigated away

User · Answer

When using jQuery  return false is doing 3 separate things when you call it    event preventDefault    event stopPropagation    Stops callback execution and returns immediately when called    See jQuery Events  Stop  Mis Using Return False for more information and examples

User · Answer

return false from within a jQuery event handler is effectively the same as calling both  e preventDefault and e stopPropagation on the passed jQuery Event object   e preventDefault   will prevent the default event from occuring  e stopPropagation   will prevent the event from bubbling up and return false will do both  Note that this behaviour differs from normal  non-jQuery  event handlers  in which  notably  return false does not stop the event from bubbling up   Source  John Resig  Any benefit to using event preventDefault   over  return false  to cancel out an href click

User · Answer

You can hang a lot of functions on the onClick event for one element  How can you be sure the false one will be the last one to fire  preventDefault on the other hand will definitely prevent only the default behavior of the element

User · Answer

The main difference between return false and event preventDefault   is that your code below return false will not be executed and in event preventDefault   case your code will execute after this statement   When you write return false it do the following things for you behind the scenes     Stops callback execution and returns immediately when called    event stopPropagation      event preventDefault

User · Answer

I think  event preventDefault    is the w3c specified way of canceling events   You can read this in the W3C spec on Event cancelation   Also you can t use return false in every situation  When giving a javascript function in the href attribute and if you return false then the user will be redirected to a page with false string written

User · Answer

Prevent Default Calling preventDefault   during any stage of event flow cancels the event  meaning that any default action normally taken by the implementation as a result of the event will not occur  You can use Event  return false return false inside a callback prevents the default behaviour  For example  in a submit event  it doesn t submit the form  return false also stops bubbling  so the parents of the element won t know the event occurred  return false is equivalent to event preventDefault     event stopPropagation

User · Answer

My opinion from my experience saying  that it is always better to use   event preventDefault      Practically         to stop or prevent submit event  whenever we required rather than return false    event preventDefault   works fine

User · Answer

Generally  your first option  preventDefault    is the one to take  but you have to know what context you re in and what your goals are    Fuel Your Coding has a great article on return false  vs event preventDefault   vs event stopPropagation   vs event stopImmediatePropagation

User · Answer

I think the best way to do this is to use event preventDefault   because if some exception is raised in the handler  then the return false statement will be skipped and the behavior will be opposite to what you want   But if you are sure that the code won t trigger any exceptions  then you can go with any of the method you wish   If you still want to go with the return false  then you can put your entire handler code in a try catch block like below      a   click function  e      try        your code here                 catch e      return false

User · Answer

From my experience event stopPropagation   is mostly used in CSS effect or animation works  for instance when you have hover effect for both card and button element  when you hover on the button both card and buttons hover effect will be triggered in this case  you can use event stopPropagation   stop bubbling actions  and event preventDefault   is for prevent default behaviour of browser actions  For instance  you have form but you only defined click event for the submit action  if the user submits the form by pressing enter  the browser triggered by keypress event  not your click event here you should use event preventDefault   to avoid inappropriate behavior  I don t know what the hell is return false  sorry For more clarification visit this link and play around with line  33 https   www codecademy com courses introduction-to-javascript lessons requests-i exercises xhr-get-request-iv

User · Answer

Basically  this way you combine things because jQuery is a framework which mostly focuses on HTML elements  you basically preventing the default  but at the same time  you stop propagation to bubble up   So we can simply say  return false in jQuery is equal to   return false is e preventDefault AND e stopPropagation  But also don t forget it s all in jQuery or DOM related functions  when you run it on the element  basically  it prevents everything from firing including the default behaviour and propagation of the event   Basically before starting using return false   first understand what e preventDefault    and e stopPropagation    do  then if you think you need both at the same time  then simply use it   So basically this code below      div   click function        return false        is equal to this code      div   click function  event      event preventDefault      event stopPropagation

User · Answer

This is not  as you ve titled it  a  JavaScript  question  it is a question regarding the design of jQuery   jQuery and the previously linked citation from John Resig  in karim79 s message  seem to be the source misunderstanding of how event handlers in general work    Fact  An event handler that returns false prevents the default action for that event  It does not stop the event propagation  Event handlers have always worked this way  since the old days of Netscape Navigator   The documentation from MDN explains how return false in an event handler works  What happens in jQuery is not the same as what happens with event handlers  DOM event listeners and MSIE  attached  events are a different matter altogether    For further reading  see attachEvent on MSDN and the W3C DOM 2 Events documentation

[javascript] event.preventDefault() vs. return false

Examples related to javascript

Examples related to jquery

Examples related to event-handling

Examples related to dom-events

Examples related to event-propagation