How to stop event bubbling on checkbox click

How to stop event bubbling on checkbox click

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:

$(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
});
});
#container.hidden #body {
display: none;
}

Some content

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;

Solutions/Answers:

Solution 1:

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).

Solution 2:

Use the stopPropagation method:

event.stopPropagation();

Solution 3:

Don’t forget IE:

if (event.stopPropagation) {    // standard
        event.stopPropagation();
    } else {    // IE6-8
        event.cancelBubble = true;
}

Solution 4:

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.

Related:  toRad() Javascript function throwing error

Solution 5:

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;
               }
          });     
  });

Solution 6:

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.