title: Click event on child div trigger action despite click handler was set on parent using addEventListener (event bubbling was disabled))
body: <p>I have three div boxes</p>
  
  <p>The first div main has an id of <code>"main"</code> and contains two other boxes with id <code>"menu_header"</code> and <code>"menu_options"</code></p>
  
  <p><strong>this is my html</strong></p>
  
  <pre><code>&lt;div id="main"&gt;
   &lt;div id="menu_header"&gt;
    &lt;/div&gt;
    &lt;div id="menu_options"&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  &lt;span&gt;Something here&lt;/span&gt;
  </code></pre>
  
  <p><strong>this is my css</strong></p>
  
  <pre><code>#main{
    display:table-cell;
    position:relative;
    top:100px;
    border:solid purple;
  }
  #menu_header{
    position:relative;
    border:solid black;
    background:red;
    width:100px;
    top:200px;
    height:100px;
   /* -moz-transition-property:bottom;
    -moz-transition-duration:2s;
    transition-property:top;
    transition-duration:1s;*/
  }
  #menu_options{
    background:blue;
    position:absolute;
    bottom:0%;
    border:solid black;
    width:100px;
    height:100px;
  }
  /*#menu_header:active{
    top:100px;
  }*/
  </code></pre>
  
  <p>(ignore css transition since it was commented out)</p>
  
  <p><strong>this is my javascript</strong></p>
  
  <pre><code>function test(e){
   //if(e.target.id=="menu_options"){return};
   $('#menu_header').animate({top:'-10'},1000);
    //var t=document.getElementById('menu_header')
   // t.setAttribute('top','40px');
    t.style="position:relative;border:solid black;background:red;width:100px;top:60px;height:100px;"
  }
  document.getElementById('main').addEventListener('click',test,false)
  </code></pre>
  
  <p><strong>finally this is my lab rat jsfiddle link 
  <a href="http://jsfiddle.net/repzeroworld/ev7k688s/" rel="nofollow noreferrer">http://jsfiddle.net/repzeroworld/ev7k688s/</a></strong></p>
  
  <p>In this scenario, when I set a click event handler on my parent container with id <code>"main"</code> everything works perfectly except that whenever click on this parent's container child div with id <code>"menu_options"</code> it also triggers the handler</p>
  
  <p>I found the link  below but somehow the <code>event.propogation()</code>  solution here seems not to work in my case.</p>
  
  <p><a href="https://stackoverflow.com/questions/16163934/clicking-on-child-element-also-triggers-click-event-on-it-parent">clicking on child element also triggers click event on it parent</a></p>
  
  <p>One nasty hack, to prevent the any actions from executing if the child div capture the event was </p>
  
  <pre><code>if(e.target.id=="menu_header"){return};
  </code></pre>
  
  <p>THe above I commented out in my javascript code.</p>
  
  <p><strong>Question:</strong>
  why is the child div with id <code>"menu_options"</code> capturing the event from the parent container with id <code>"main"</code> despite me setting <code>false</code> on <code>add EventListener</code> to prevent event bubbling.?</p>