What s the effect of adding return false to a click event listener

Question

Many times I ve seen links like these in HTML pages    lt a href     onclick  someFunc 3 1415926   return false   gt Click here   lt  a gt    What s the effect of the return false in there   Also  I don t usually see that in buttons   Is this specified anywhere  In some spec in w3 org

User · Answer

Retuning false from a JavaScript event usually cancels the  default  behavior - in the case of links  it tells the browser to not follow the link

User · Answer

The return false is saying not to take the default action  which in the case of an  lt a href gt  is to follow the link   When you return false to the onclick  then the href will be ignored

User · Answer

Return false will stop the hyperlink being followed after the javascript has run  This is useful for unobtrusive javascript that degrades gracefully - for example  you could have a thumbnail image that uses javascript to open a pop-up of the full-sized image  When javascript is turned off or the image is middle-clicked  opened in a new tab  this ignores the onClick event and just opens the image as a full-sized image normally   If return false were not specified  the image would both launch the pop-up and open the image normally  Some people instead of using return false use javascript as the href attribute  but this means that when javascript is disabled the link will do nothing

User · Answer

Browser hack  http   jszen blogspot com 2007 03 return-false-to-prevent-jumping html

User · Answer

Return false will prevent navigation  Otherwise  the location would become the return value of someFunc

User · Answer

The return value of an event handler determines whether or not the default browser behaviour should take place as well   In the case of clicking on links  this would be following the link  but the difference is most noticeable in form submit handlers  where you can cancel a form submission if the user has made a mistake entering the information   I don t believe there is a W3C specification for this   All the ancient JavaScript interfaces like this have been given the nickname  DOM 0   and are mostly unspecified   You may have some luck reading old Netscape 2 documentation   The modern way of achieving this effect is to call event preventDefault    and this is specified in the DOM 2 Events specification

User · Answer

By default  when you click on the button  the form would be sent to server no matter what value you have input  However  this behavior is not quite appropriate for most cases because we may want to do some checking before sending it to server  So  when the listener received  quot false quot   the submitting would be cancelled  Basically  it is for the purpose to do some checking on front end

User · Answer

WHAT  return false  IS REALLY DOING   return false is actually doing three very separate things when you call it    event preventDefault    event stopPropagation    Stops callback execution and returns immediately when called    See jquery-events-stop-misusing-return-false for more information   For example    while clicking this link  return false will cancel the default behaviour of the browser     lt a href     onclick  someFunc 3 1415926   return false   gt Click here   lt  a gt

User · Answer

I am surprised that no one mentioned onmousedown instead of onclick  The   onclick  return false    does not catch the browser s default behaviour resulting in  sometimes unwanted  text selection occurring for mousedown but   onmousedown  return false    does   In other words  when I click on a button  its text sometimes becomes accidentally selected changing the look of the button  that may be unwanted  That is the default behaviour that we are trying to prevent here  However  the mousedown event is registered before click  so if you only prevent that behaviour inside your click handler  it will not affect the unwanted selection arising from the mousedown event  So the text still gets selected  However  preventing default for the mousedown event will do the job   See also event preventDefault   vs  return false

User · Answer

You can see the difference with the following example    lt a href  http   www google co uk   onclick  return  confirm  Follow this link      gt Google lt  a gt    Clicking  Okay  returns true  and the link is followed  Clicking  Cancel  returns false and doesn t follow the link  If javascript is disabled the link is followed normally

User · Answer

I believe it causes the standard event to not happen   In your example the browser will not attempt to go to

User · Answer

using return false in an onclick event stops the browser from processing the rest of the execution stack  which includes following the link in the href attribute   In other words  adding return false stops the href from working   In your example  this is exactly what you want   In buttons  it s not necessary because onclick is all it will ever execute -- there is no href to process and go to

User · Answer

The return false prevents the page from being navigated and unwanted scrolling of a window to the top or bottom   onclick  return false

User · Answer

Here s a more robust routine to cancel default behavior and event bubbling in all browsers     Prevents event bubble up or any usage after this is called  eventCancel   function  e        if   e          if  window event  e   window event          else return      if  e cancelBubble    null  e cancelBubble   true      if  e stopPropagation  e stopPropagation        if  e preventDefault  e preventDefault        if  window event  e returnValue   false      if  e cancel    null  e cancel   true     An example of how this would be used in an event handler     Handles the click event for each tab Tabstrip tabstripLinkElement click   function  evt  context            Find the tabStrip element  we know it s the parent element of this link      var tabstripElement   this parentNode      Tabstrip showTabByLink tabstripElement  this       return eventCancel evt

User · Answer

I have this link on my HTML-page    lt a href       onclick    setBodyHtml   new content    return false     gt  click here  lt  a gt    The function setBodyHtml   is defined as   function setBodyHtml  s    document body innerHTML   s      When I click the link the link disappears and the text shown in the browser changes to  new content    But if I remove the  false  from my link  clicking the link does  seemingly  nothing  Why is that   It is because if I don t return false the default behavior of clicking the link and displaying its target-page happens  is not canceled  BUT  here the href of the hyperlink is    so it links back to the SAME current page  So the page is effectively just refreshed and seemingly nothing happens    In the background the function setBodyHtml   still does get executed  It assigns its argument to body innerHTML  But because the page is immediately refreshed reloaded the modified body-content does not stay visible for more than a few milliseconds perhaps  so I will not see it   This example shows why it is sometimes USEFUL to use  return false     I do want to assign SOME href to the link  so that it shows as a link  as underlined text  But I don t want the click to the link to effectively just reload the page  I want that default navigation behavior to be canceled and whatever side-effects are caused by calling my function to take and stay in effect  Therefore I must  return false    The example above is something you would quickly try out during development  For production you would more likely assign a click-handler in JavaScript and call preventDefault   instead  But for a quick try-it-out the  return false  above does the trick

User · Answer

When using forms we can use  return false  to prevent submitting   function checkForm            return true to submit  return false to prevent submitting    lt form onsubmit  return checkForm    gt           lt  form gt

[javascript] What's the effect of adding 'return false' to a click event listener?

Examples related to javascript

Examples related to html