jquery click event on container and not contents

Question

I have a h3 which is clickable, (it fires a drop down). It also contains a input check box to turn on/off a value, however I don't want it to trigger the drop down.

Any ideas how this can be done?

Here's my markup

<div id="" class="dropDownTitle">
    <h3 class="h3"> Some text here <input id=""  type="checkbox" /></h3>
</div>

Again I want the h3 to trigger the drop down, but not the input contained within it.

More than happy to get this done in pure javascript rather than jquery, the trigger just fires the function dropDownMenu();

cheers

Andy

Answer 1

You could capture the click event on the checkbox and stop the propagation there:

$(".dropDownTitle input").click(function(e) {
    e.stopPropagation();
});

That will prevent the event from bubbling up to the parent h3 and triggering any click event handlers bound to that.