title: Prevent a double-click being interpreted as two single-clicks?
body: <p>I have the following rather simple React Class:</p>
  
  <pre><code>import React from "react"
  
  export default class DoubleClick extends React.Component {  
  
    constructor(props) {
      super(props);
      this.state = {
      };
      this.handleClick = this.handleClick.bind(this);
      this.handleDoubleClick = this.handleDoubleClick.bind(this);
    }
    handleClick() {
      console.log("Click");
    }
    handleDoubleClick() {
      console.log("Double Click");
    }
    render() {
      return (
        &lt;div style={{backgroundColor: 'pink'}}&gt;
            &lt;div onClick={this.handleClick}&gt; 
              &lt;span onDoubleClick={this.handleDoubleClick}&gt; Hello &lt;/span&gt; 
              &lt;span onDoubleClick={this.handleDoubleClick}&gt; world. &lt;/span&gt;
            &lt;/div&gt;
        &lt;/div&gt;
      );
    }
  } 
  </code></pre>
  
  <p>When somebody single-clicks on the outer div, I want to call <code>handleClick</code>, when somebody double-clicks on any of the inner spans I want to call <code>handleDoubleClick</code>, but not the <code>handleClick</code> for the outer div as well.</p>
  
  <p>However, whenever I double-click, <code>handleDoubleClick()</code> is called, <em>but</em> <code>handleClick</code> is also called, namely twice. </p>
  
  <p>I would like to call <code>handleClick()</code> only when I click, but do <em>not</em> double-click - is this possible?</p>