點擊子元素觸發父級點擊事件

Question

我知道這個問題已被問了幾次，但我似乎無法得到這個工作。當孩子點擊時，我不希望父事件發生。我有以下幾點：

<div class="tabItem"> 
    <span> Item 1</span> 
    <div class='contentBody'>Item 2 Body</div> 
</div> 

而下面的jQuery：

$(document).ready(function() { 

      $('.tabItem').each(function(index){        

       $(this).attr('id', 'tabIndex'+index);    
       var contentDiv = $(this).find('div').first(); 
       var position = contentDiv.position(); 
       var right = $(window).width() - position.left - contentDiv.width() ; 
       var top = (position.top - 18) ; 
       var contentId = 'tabContent' + index;   

       $(contentDiv).css("display", "none").css({top: top, left: 200}).attr('id', contentId);     

       $(this).on('click', function() {    

        $(this).removeClass('tabItem').addClass('tabItemSelected');           

        $(currentTab).removeClass('tabItemSelected').addClass('tabItem'); 

        if($('#' + currentContentBody).is(":visible")){ 
         $('#' + currentContentBody).toggle("slide"); // close the last tab 
        } 
        if($(contentDiv).is(":hidden")){ 
         $(contentDiv).toggle("slide");  

        }   
        currentTab = $(this); 
        currentContentBody = $(contentDiv).attr('id'); 

       });    
      }); 

    }); 

的單擊事件是與tabItem類的父。但是當我點擊子div，父事件文件。以下是一個工作示例jsfiddle

Answer 1

另一種可能的解決方案是綁定click事件到span：

$(this).find('span').on('click', function(e) { 

DEMO：https://jsfiddle.net/lmgonzalves/asqwnr8v/3/

注意：你也需要解決一些$(this)到$(this).parent()的click事件中。

Answer 2

您需要在子項的事件處理函數上調用event.stopPropagation()。這將防止事件冒泡到父元素。

對此非常小心，因爲如果你不小心的話，你可以快速切斷從冒泡到父母的所有點擊事件。這顯然是而不是你想要什麼。

Answer 3

只是改變你的點擊處理程序是：

 $(this).on('click', function(e) {    

      $(this).removeClass('tabItem').addClass('tabItemSelected');           

      $(currentTab).removeClass('tabItemSelected').addClass('tabItem'); 

      if($('#' + currentContentBody).is(":visible")){ 
       $('#' + currentContentBody).toggle("slide"); // close the last tab 
      } 
      if($(contentDiv).is(":hidden")){ 
       $(contentDiv).toggle("slide");  

      }   
      currentTab = $(this); 
      currentContentBody = $(contentDiv).attr('id'); 

      e.stopPropagation(); 

     }); 

，其中重要的變化是：

$（本）。在（ '點擊'，功能（E）{

和

e.stopPropagation（ ）;