jquery在容器上单击事件而不是内容

Question

我有一个可点击的h3，（它会触发下拉）。 它还包含一个输入复选框来打开/关闭一个值，但我不希望它触发下拉。

任何想法如何做到这一点？

这是我的标记

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

我再次希望h3触发下拉，但不是其中包含的输入。

非常乐意在纯javascript而不是jquery中完成此操作，触发器只会触发函数dropDownMenu（）;

欢呼声

安迪

Answer 1

您可以在复选框上捕获点击事件，并在那里stop the propagation

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

这将阻止事件冒泡到父h3并触发绑定到该事件的任何点击事件处理程序。

Answer 2

如果您不想使用javascript

，我会尝试将触发器放在另一个元素上

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

所以这里触发器将在跨度