html - 如何使 div 的整个区域都可以点击，同时排除该区域顶部的复选框？

Question

我有一个 div，里面有一个复选框:

<div class="study-box set-box">
    <span class="set-box-title"><i class="icon-th-list icon-white"></i>test set</span>
    <input class="study-box-checkbox" type="checkbox" />
</div>

我希望整个 div 都可以点击，这样我就可以执行 onClick() 事件。不过，我不希望在单击复选框时调用此事件。我正在考虑在复选框的左侧和底部添加一些区域并将事件绑定(bind)到这些区域，但这似乎很老套。想法？

带有示例框/复选框的 JSFiddle:

http://jsfiddle.net/PTSkR/59/

Answer 1

单击输入时停止事件传播。

$(".study-box").on("click", function () {
    console.log("clicked");
});
$("input").on("click", function (e) {
    e.stopPropagation();
});

http://jsfiddle.net/PTSkR/60/