title: Separate onClick event for parent and child element
body: <p>I have JSX code like this:</p>
  <pre><code>&lt;div id=&quot;parent&quot; onClick={clickOnParent} style={{ width: 100, height: 100 }}&gt;
    &lt;div id=&quot;child&quot; onClick={clickOnChild} style={{ width: 20, height: 20 }} /&gt;
  &lt;/div&gt;
  </code></pre>
  <p>When I click on <code>parent</code> (outside the <code>child</code>) it will run <code>clickOnParent</code>, and when I click the <code>child</code> it will run both <code>clickOnParent</code> and <code>clickOnChild</code> of course.<br />Now I want to trigger only <code>clickOnChild</code> and ignore <code>clickOnParent</code> when clicking exactly on the <code>child</code>. How can I do?</p>