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

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

• javascript
• jquery

2 Answers 2

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.

I try putting the trigger on another element like that, if you don't want to use javascript

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

So here the trigger would be on the span