當我們點擊該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(); 
});