与onclick切换复选框切换双切换（如何阻止内部切换）

Question

我有一个<li>内的复选框作为菜单的一部分。包装物品有一个点击处理器，用于切换复选框（与整个菜单的感觉一致）。问题是如果用户直接点击复选框，它将执行其默认切换，然后外部处理程序也切换它。我怎样才能防止这个双切换？

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

我试过disabled但改变渲染，这是我不想要的。

我使用jQuery的情况下，有一个功能有帮助。

Answer 1

可以使用.stopPropagation()功能，以防止传播了DOM树点击jQuery的方法。

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> 

Answer 2

下面是该http://api.jquery.com/event.stopPropagation/