admin管理员组

文章数量:1333693

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

Share Improve this question asked Oct 26, 2011 at 11:53 atmdatmd 7,4903 gold badges35 silver badges64 bronze badges
Add a ment  | 

2 Answers 2

Reset to default 8

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

本文标签: javascriptjquery click event on container and not contentsStack Overflow