防止div內的複選框觸發div函數

Question

我有一個divs列表，點擊展開它們下面的div。這工作得很好。 現在我想添加一個複選框到可點擊的div中，但是每次點擊該複選框時，它都會觸發放置div的功能，這會使div在檢查框的同時展開，反之亦然。 我想檢查並取消選中該框，而不觸發它後面的div。 Expandable divs

Answer 1

您需要在複選框的點擊回調中添加event.stopPropagation()。這將防止點擊事件冒泡到div。

一個例子：

$('input:checkbox').on("click", function(event) { 
    // Do something here 
    event.stopPropagation(); 
}); 

Answer 2

這是怎麼樣的一個哈克的方式做到這一點，但它可能工作：

<script> 

    var prevent_div_click = false; 

    $(function(){ 

     $('#div-id').on('mouseenter', '#checkbox-id', function(){ 
      prevent_div_click = true; 
     }); 

     $('#div-id').on('mouseleave', '#checkbox-id', function(){ 
      prevent_div_click = false; 
     }); 

     $('#div-id').click(function(){ 
      if(!prevent_div_click){ 
       // do your stuff 
      } 
     }); 

    }); 

</script>