title: React and blur event
body: <p>I have a simple issue with React and event handling. My component looks like this (basically a table):</p>
  
  <pre class="lang-jsx prettyprint-override"><code>const MyList = ({ items, onBlur }) =&gt;
  &lt;table onBlur={onBlur}}&gt;
      &lt;thead&gt;
      &lt;tr&gt;
          &lt;th&gt;ID&lt;/th&gt;
          &lt;th&gt;Title&lt;/th&gt;
          &lt;th&gt;Publisher&lt;/th&gt;
          &lt;th&gt;Year&lt;/th&gt;
          &lt;th&gt;Author&lt;/th&gt;
          &lt;th&gt;System&lt;/th&gt;
          &lt;th/&gt;
      &lt;/tr&gt;
      &lt;/thead&gt;
      &lt;tbody&gt;
      {items.map(item =&gt; &lt;MyListRow key={item.Id} item={item}/&gt;)}
      &lt;/tbody&gt;
  &lt;/table&gt;;
  </code></pre>
  
  <p>I want the <code>blur</code> event to fire <strong>only if the focus goes out of the table</strong>. Instead the <strong>event fires on each child element of the table</strong> when it loses focus.</p>
  
  <p>According to the docs React lets focus events bubble up.</p>
  
  <p>The question is: How can I get my <code>onBlur</code> method fire only when the focus gets out of the table? IOW: How can I filter out and discard the unwanted events bubbling up so that I reveal only the events which indicate a lost of focus for the table?</p>