Click event in parent and children

Question

I have a parent element DIV that has children div elements. I have separate click implementations for parent and its children.

<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');

    }); 

This is working fine. but if I click a child then the event runs twice which is how it is supposed to work. My question is - Is there a way that I can explicitly write event to parent that would not affect children so that children need not execute click function twice?

Answer 1

yes you can just, change the order of binding the events and to stop propagation use stopImmediatePropagation

consider this 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

You can use use event.stopPropagation:

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

to prevent event buble up