当我们点击该div内的复选框时，如何防止div崩溃？

Question

我有一个复选框存在于div中。当用户点击div（除了复选框）另一个div显示和隐藏。这是通过JQuery实现的。但我的问题是，当我点击复选框的div也显示滑动效果（我不想）。点击复选框时如何防止div滑动。

Answer 1

挣扎了一天我终于得到了解决之后。我只是在JQuery中添加一个参数给事件。然后检查事件源是否为“CheckBox”类型，然后不折叠div，否则折叠div。我的代码如下：

$(document).ready(function() 
    { 
     //The event handler for the click event of the div. 
     $('.divClientList').click(function(e) 
     { 
      //Check if the event source is other then checkbox, 
      //then collapse the div, else do nothing. 
      if (e.target.type != "checkbox") 
      { 
       //If the target div content is empty then do nothing.      
       if ($('.divContent').is(':empty')) 
       { 
       } 
       else 
       { 
        $('.divContent').slideToggle('slow'); 
       } 
      } 

     }); 
    }); 

Answer 2

在复选框上使用.stopPropagation()方法。如果您的复选框的ID为thecheckbox，使用

$("#thecheckbox").click(function(event){ 
    event.stopPropagation(); 
});