如何挑选内部容器中的复选框单击事件？

Question

我有一个概述列表，divs，并且每个div都有一对，它包含所有的细节。如果你点击“intro”div，那么详细的对将被打开，并且介绍被隐藏。 Eeach div有一个复选框。我碰到一个问题，如果我点击“intro”div的复选框，详细的div将会打开，因为点击事件也会发生在intro div上。我想出了一个解决方案，使用外部跨度，我存储所有打开的div ID。

<div class="divIntroHolder" id="divIntroHolder15"> 
      <span class="spanChkHolder"><input type="checkbox" name="Nr" value="15" class="chkMessage" id="chkMessage15"/></span> 

     </div> 

     <div class="divDetailHolder" id="divDetailHolder15"> 
      <div class="divPicContainer"> 
       <span class="spanChkHolder"><input type="checkbox" name="Nr" value="15" class="chkMessage"/></span> 
      </div> 
     </div> 

为了这个，我有一个js这样

$(document).ready(function() { 
$(".divIntroHolder").click(function() { 
    var id = getId($(this).attr("id")); 
    if (!isOpen("spanOpenDivs", id)) { //check if the div is open or not 
     addTo("spanOpenDivs", id); // add to span 
     $(this).hide(); 
     $("#divDetailHolder" + id).show(); 
    } else { 
     removeFrom("spanOpenDivs", id); //remove from the span 
    } 
}); 

$(".chkMessage").click(function() { 
    var id = $(this).val(); 
    //prevent opening the detailed div 
    if (!isOpen("spanOpenDivs", id)) 
     addTo("spanOpenDivs", id); 

    var clicked = $(this); 
    $(".chkMessage").each(function() { 
     if ($(this).val() == id) { 
      $(this).attr("checked", clicked.attr("checked")); 
     } 
    }); 
}); 

}); 

它使得JS有点复杂，我认为必须有挑出一个复选框，单击事件更简单的方法。如果复选框被选中或未选中，它应该很重要，但它应该只是过滤出单击事件。

如果有人对这个问题的简单解决方案，我们将不胜感激了很多=）

Answer 1

$(".chkMessage").click(function (evt) { 
    evt.stopPropagation(); 
    ... 
} 

jQuery event.stopPropagation()