title: how to stop triggering onMouseDown when element is only clicked?
body: <p>I am trying to develop a game in which units(svg elms) are moved with react</p>
  
  <p>The unit should be move by dragging. A form should be open if its only clicked.
  When I click the unit mousedown is triggerd but onclick is not.</p>
  
  <pre><code>class Unit extends Component {
    state = {
       moving:false
    };
    handleClick = (e) =&gt;{
      console.log("Clicked");
    }
    startMove = e =&gt; {
      this.setState({moving:true})
    };
    render() {
      return (
            &lt;g className="u-wrapper"&gt;
            &lt;g onClick={this.handleClick}
            onMouseDown={this.startMove}&gt;
            {this.createCircle()}
            /&gt;
          &lt;/g&gt;
          {this.renderRangeCircle()};
        &lt;/g&gt;
      );
    }
  }
  </code></pre>
  
  <p>mouseDown should not trigger if mouse is only clicked.
  may be way to trigger both but onclick first</p>