title: Vanilla JS event delegation - dealing with child elements of the target element
body: <p>I'm trying to do event delegation in vanilla JS. I have a button inside a container like this</p>
  
  <pre class="lang-html prettyprint-override"><code>&lt;div id="quiz"&gt;
      &lt;button id="game-again" class="game-again"&gt;
          &lt;span class="icon-spinner icon"&gt;&lt;/span&gt;
          &lt;span&gt;Go again&lt;/span&gt;
      &lt;/button&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>And following <a href="http://davidwalsh.name/event-delegate" rel="noreferrer">David Walsh's nice instructions</a> I'm adding an event handler to an ancestor of the button like so:</p>
  
  <pre class="lang-js prettyprint-override"><code>this.container.addEventListener('click', function(e){
      if (e.target &amp;&amp; e.target.id == 'game-again') {
          e.stopPropagation();
          self.publish('primo:evento');
      }
  });
  </code></pre>
  
  <p>Where <code>this.container</code> is the #quiz element. This works half the time, but the rest of the time the target of the click event is one of the spans inside the button, so my event handler isn't called. What's the best way to deal with this situation?</p>