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

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 树中向上传播。

这是一个例子

$(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>