Нажмите событие в родительском и дочернем объектах

Question

У меня есть родительский элемент DIV, в котором есть дочерние элементы div. У меня есть отдельные реализации щелчка для родителя и его дочерних элементов.

<div id="mainContainer"> 

    <div id="childContainer">  
    </div> 

    <div id="childContainer2"> 
    </div> 

</div> 

$('#mainContainer').click(function() { 

     console.log('main container'); 

    }).children().click(function() { 
     console.log('childen'); 
     return false; 
    }); 

    $('#childContainer2').click(function() { 

     console.log('child container 2'); 

    }); 

Это прекрасно работает. но если я нажму на дочерний элемент, тогда событие будет выполняться дважды, и именно так оно и должно работать. Мой вопрос: существует ли способ, который я могу явно записать событие родительскому, которое не повлияет на детей, чтобы дети не могли дважды выполнять функцию щелчка?

Answer 1

да вы можете просто, изменить порядок связывания событий и прекратить использование РАСПРОСТРАНЕНИЕ stopImmediatePropagation

рассмотреть этот fiddle

$('#childContainer2').click(function (e) {  
     alert('child container 2'); 
     e.stopImmediatePropagation() 
    return false; 
    }); 
$('#mainContainer').click(function() { 
alert('main container'); 

    }).children().click(function (e) { 
     alert('childen'); 
     return false; 
    }); 

Answer 2

Вы можете использовать использовать event.stopPropagation:

children().click(function (e) { 
    e.stopPropagation(); 
    console.log('childen'); 
    return false; 
}); 

предотвратить Buble событий до

Answer 3

Оба return false; & event.stopPropagation прекращает распространение события родительскому объекту.

Адрес demo fiddle.