Question

我在<li>内有一个复选框，作为菜单的一部分。包装项目有一个点击处理程序，可以切换复选框（与整个菜单的感觉一致）。问题是如果用户直接点击复选框，它将执行默认切换，然后外部处理程序也切换它。如何防止这种双重切换？

<li onclick='/*toggle checkbox*/'><input type='checkbox'/>...</li>

我尝试了disabled，但这改变了我不想要的渲染。

我正在使用jquery，以防有一个功能有帮助。

Answer 1

这是http://api.jquery.com/event.stopPropagation/

的jQuery方法

Answer 2

您可以使用.stopPropagation()功能阻止点击在DOM树上传播。

Here's an example

$(document).ready(function () {
    $("input[type=checkbox]").click(function (evt) {
        evt.stopPropagation();
        $("#thetext").html("checbox clicked");
    });

    $("li").click(function () {
        $("#thetext").html("li clicked");
    });
});

HTML

<ul>
    <li>
        <input type='checkbox' />
    </li>
</ul>
<div id="thetext">hm</div>

带有onclick切换的div中的复选框双切换（如何阻止内部切换）

2 个答案: