title: e.stopPropagation not working
body: <p>I added a <code>transtionend</code> callback event to an element. This element has a child that has a transition as well.</p>
  
  <p>The problem is that, when the child's transition ends, its' parent <code>transitionend</code> event gets called.</p>
  
  <p>I tried adding <code>e.stopPropagation()</code> to the <code>transitionend</code> event, but it didn't help. It didn't seem like it did anything. How can I prevent the <code>transitionend</code> event happening when the child finishes its transition?</p>
  
  <p><a href="https://jsfiddle.net/h42dqksx/2/" rel="nofollow"><h3>JSFiddle</h3></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 outer = document.getElementById('outer'),
    content = document.getElementById('content'),
    outerButton = document.getElementById('outerButton'),
    contentButton = document.getElementById('contentButton');
  
  outerButton.addEventListener('click', function() {
    outer.style.width = (outer.style.width === '300px') ? '500px' : '300px';
  });
  
  contentButton.addEventListener('click', function() {
    content.style.width = (content.style.width === '150px') ? '250px' : '150px';
  });
  
  if ('transition' in document.documentElement.style) {
    outer.addEventListener('transitionend', function(e) {
      alert('transitionend');
      console.log('before');
      e.stopPropagation();
      console.log('after');
    });
  }</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>#outer {
    width: 500px;
    background-color: orange;
    transition: width 0.7s ease-in-out;
  }
  #content {
    background-image: url("http://i.imgur.com/nri7bYd.jpg");
    height: 200px;
    width: 250px;
    transition: width 0.7s ease-in-out;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div id="outer"&gt;
    &lt;div id="content"&gt;This is some content&lt;/div&gt;
  &lt;/div&gt;
  
  &lt;button id="outerButton"&gt;Change Width of Outer (orange) Element&lt;/button&gt;
  &lt;br /&gt;
  &lt;br /&gt;
  &lt;button id="contentButton"&gt;Change Width of Content (image) Element&lt;/button&gt;</code></pre>
  </div>
  </div>
  </p>