title: Click event in parent and children
body: <p>I have a parent element DIV that has children div elements. I have separate click implementations for parent and its children.</p>
  
  <pre><code>&lt;div id="mainContainer"&gt;
  
      &lt;div id="childContainer"&gt;    
      &lt;/div&gt;
  
       &lt;div id="childContainer2"&gt; 
      &lt;/div&gt;
  
  &lt;/div&gt;
  
  $('#mainContainer').click(function () {
  
          console.log('main container');
  
      }).children().click(function () {
          console.log('childen');
          return false;
      });
  
      $('#childContainer2').click(function () {
  
          console.log('child container 2');
  
      }); 
  </code></pre>
  
  <p>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?  </p>