title: Event is bubbling to parent even with stopPropagation?
body: <p>Is stop propagation not meant to stop bubbling to a parent element?</p>
  
  <p>I know to check for the event target in this case, I am just wondering why stopPropagation, which the word alone smacks of preventing just this issue, doesnt perform that way.   </p>
  
  <p><a href="https://jsfiddle.net/hzo9eq9m/" rel="nofollow">https://jsfiddle.net/hzo9eq9m/</a> </p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>var child = document.querySelector('.parent')
      .addEventListener('click',function(e){
          e.stopPropagation();
          $(this.querySelector('.child')).toggleClass('selected');
          console.log(e);
      },
  false);</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.society {
    padding:10px;
    background-color:green;
    position:relative;
  }
  
  .parent {
    background-color:red;
    width:60%;
    margin-left:30%;
  }
  
  .child {
    width: 100%;
    background-color:pink;
    position:absolute;
    top:0;
    left:0;
    width:0;
    max-width:0px;
    max-height:0px;
    transition: max-width 1s, max-height 1s;
    overflow:hidden;
  }
  
  .child.selected {
    top:0;
    left:0;
    width:100%;
    max-width:1000px;
    max-height:1000px;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="society"&gt;
    &lt;div class="parent"&gt;
       parent
      &lt;div class="child"&gt;
        child
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>