javascript - 在 jQuery 事件处理程序中检查输入[type=checkbox]

Question

我有以下 HTML:

<ul id=list>
    <li>
        <input type=checkbox />
        Item 1
    </li>
    <li>
        <input type=checkbox />
        Item 2
    </li>
    <li>
        <input type=checkbox />
        Item 3
    </li>
</ul>

以及相应的 JavaScript:

$('ul').bind('click', function(e) {

    if (e.srcElement.tagName.toLowerCase() === 'input') {
        e.srcElement.checked = true;
    }

    return false;
});
    
$('body').bind('click', function() {

    alert('you should see this alert if and only if you did NOT click the list');

})

当我单击复选框时，它不会被选中。我希望当用户单击它时检查它。

如何在用户单击该复选框时选中该复选框，但是 仍然取消 body 点击事件处理程序吗？

我已经发布了JS fiddle也是如此。

编辑:我知道代码有点笨拙，但是应用程序需要以这种方式构建它，因此解决方案应尽可能接近原始代码。话虽这么说，对观察到的行为的解释将不胜感激。

Answer 1

使用e.stopPropagation() ^[docs]而不是返回 false。后者还可以防止默认操作的发生，即切换复选框的状态。

您还应该考虑将事件处理程序绑定(bind)到 change 事件，而不是 click，鼠标并不是切换复选框的唯一方法。不过，您仍然需要添加一个额外的处理程序来防止 click 事件冒泡。