Нажатие дочернего элемента запускает событие родительского щелчка

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.stopPropagation ();