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]代替return false。后者还可以防止发生默认操作，即切换复选框的状态。

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

Answer 2

您绑定点击“ul”，您应该将其绑定到“ul＆gt; input”

为避免点击冒泡，您需要使用event.stopPropagation（）取消冒泡我注意到stopPropagation（）应该是函数中的第一件事。

$('ul').bind('click', function(e){
    e.stopPropagation();
    if (e.target.tagName.toLowerCase() === 'input') {
       e.target.checked = true;
    }
});

$('body').bind('click', function() {

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

Answer 3

我认为this是您想要的？

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

$('body').bind('click', function() {
    alert('you only see this alert if and only if you did NOT click the list');
})

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

3 个答案: