title: How to get as e.target the exact element at which onClick is specified?
body: <p>I have a React Component and give it <code>onClick</code> event handler:</p>
  <pre><code>function Item(props) {
    return &lt;li onClick={props.onClick}&gt;{props.children}&lt;/li&gt;
  }
  </code></pre>
  <p>Then I use the Component like this:</p>
  <pre><code>&lt;Item onClick={ function(e) {console.log(e.target)} }&gt;
    &lt;span&gt;This element is returned as e.target if clicked on it!&lt;/span&gt;
  &lt;/Item&gt;
  </code></pre>
  <p>When I click on the text, the <em>span</em> element is logged as target and when it is clicked outside given span, <em>li</em> element is logged as target.</p>
  <p>The problem is:<br />
  If there is a lot of child elements inside <em>li</em> element, and id or name are have to be gotten, it becomes a &quot;hacky&quot; task...</p>
  <p>The question is:<br />
  Is it possible to get inside a handler function as e.target the exact element at which <code>onClick</code> is specified (not it's children; in this case <em>li</em>)?</p>
  <p>PS. No jQuery for solution if possible.</p>