How to stop event bubbling on checkbox click

Question

I have a checkbox that I want to perform some Ajax action on the click event  however the checkbox is also inside a container with it s own click behaviour that I don t want to run when the checkbox is clicked  This sample illustrates what I want to do   x000D   x000D    document  ready function           container   addClass  hidden          header   click function         if      container   hasClass  hidden                container   removeClass  hidden          else             container   addClass  hidden                      header input type checkbox    click function event           Do something           x000D   container hidden  body     display  none    x000D   lt script type  text javascript  src  https   ajax googleapis com ajax libs jquery 1 3 2 jquery min js  gt  lt  script gt   lt div id  container  gt     lt div id  header  gt       lt h1 gt Title lt  h1 gt       lt input type  checkbox  name  test    gt     lt  div gt     lt div id  body  gt       lt p gt Some content lt  p gt     lt  div gt   lt  div gt  x000D   x000D   x000D   However  I can t figure out how to stop the event bubbling without causing the default click behaviour  checkbox becoming checked unchecked  to not run  Both of the following stop the event bubbling but also don t change the checkbox state  event preventDefault    return false

User · Answer

Don t forget IE   if  event stopPropagation          standard         event stopPropagation          else         IE6-8         event cancelBubble   true

User · Answer

In angularjs this should works   event preventDefault     event stopPropagation

User · Answer

Use the stopPropagation method   event stopPropagation

User · Answer

replace   event preventDefault    return false    with  event stopPropagation      event stopPropagation        Stops the bubbling of an event to   parent elements  preventing any parent   handlers from being notified of the   event    event preventDefault        Prevents the browser from executing   the default action  Use the method   isDefaultPrevented to know whether   this method was ever called  on that   event object

User · Answer

When using jQuery you do not need to call a stop function separate   You can just return false in the event handler  This will stop the event and cancel bubbling     Also see event preventDefault   vs  return false  From the jQuery docs      These handlers  therefore  may prevent the delegated handler from triggering by calling event stopPropagation   or returning false

User · Answer

Here s a trick that worked for me  handleClick   e   gt        if  e target     e currentTarget               do something       else              do something else          Explanation  I attached handleClick to a backdrop of a modal window  but it also fired on every click inside of a modal window  because it was IN the backdrop div   So I added the condition  e target     e currentTarget   which is only fulfilled when a backdrop is clicked

User · Answer

This is an excellent example for understanding event bubbling concept  Based on the above answers  the final code will look like as mentioned below  Where the user Clicks on checkbox the event propagation to its parent element  header  will be stopped using event stopPropagation          document  ready function                     container   addClass  hidden                    header   click function                     if     container   hasClass  hidden                              container   removeClass  hidden                      else                           container   addClass  hidden                                                    header input type checkbox    click function event                  if  event stopPropagation          standard                    event stopPropagation                     else         IE6-8                     event cancelBubble   true

User · Answer

Credit to  mehras for the code  I just created a snippet to demonstrate it because I thought that would be appreciated and I wanted an excuse to try that feature    x000D   x000D    document  ready function     x000D        container   addClass  hidden    x000D        header   click function     x000D      if      container   hasClass  hidden      x000D            container   removeClass  hidden    x000D        else   x000D            container   addClass  hidden    x000D        x000D        x000D        header input type checkbox    click function event    x000D      if  event stopPropagation       standard x000D        event stopPropagation    x000D        else      IE6-8 x000D        event cancelBubble   true  x000D        x000D        x000D      x000D  div   x000D    text-align  center  x000D    padding  2em  x000D    font-size  1 2em x000D    x000D   x000D   hidden   x000D    display  none  x000D    x000D   lt script src  https   ajax googleapis com ajax libs jquery 1 11 1 jquery min js  gt  lt  script gt  x000D   lt div id  header  gt  lt input type  checkbox    gt Checkbox won t bubble the event  but this text will  lt  div gt  x000D   lt div id  container  gt click   bubbled up  lt  div gt  x000D   x000D   x000D

User · Answer

As others have mentioned  try stopPropagation     And there is a second handler to try  event cancelBubble   true  It s a IE specific handler  but it is supported in at least FF  Don t really know much about it  as I haven t used it myself  but it might be worth a shot  if all else fails

[javascript] How to stop event bubbling on checkbox click

Examples related to javascript

Examples related to jquery

Examples related to checkbox

Examples related to events