title: Always select a parent element when clicking on a child
body: <p>I have a div (a tab) with 3 span inside, like this: </p>
  
  <pre><code>&lt;div class="chat-tabs"&gt;
      &lt;div class="chat-tabs-cont"&gt;
          &lt;div id="chat-tab-1" class="chat-tab chat-tab-sel"&gt;
              &lt;span class="chat-tab-n"&gt;1&lt;/span&gt;
              &lt;span class="chat-tab-t"&gt;Tab text 1&lt;/span&gt;
              &lt;span class="chat-tab-c"&gt;11:00&lt;/span&gt;
          &lt;/div&gt;
          &lt;div id="chat-tab-2" class="chat-tab"&gt;
              &lt;span class="chat-tab-n"&gt;2&lt;/span&gt;
              &lt;span class="chat-tab-t"&gt;Tab text 2&lt;/span&gt;
              &lt;span class="chat-tab-c"&gt;11:30&lt;/span&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>These are tabs, so when I click on one tab, I have a click event in Meteor to give the new tab a class of <code>chat-tab-sel</code> and remove this class from old tab (standard tab behaviour).</p>
  
  <p>My problem is that depending where the user clicks, my <code>event.target</code> is not allways the parent div <code>chat-tab</code>, but one of child <code>span</code>. And I need to add/remove classes to the parent <code>div</code>.</p>
  
  <p>I think if the parent has <code>display: block</code> it may work, but in this case I need it to be <code>display: flex</code> because it makes sense to have flexible width on childs.</p>
  
  <p>So: Is it possible to ensure that the parent div is targeted when user clicks on a child?</p>