title: React: onClick() event provides wrong cursor coordinates
body: <p>please educate me on the following issue. I have a React component. On mouse button click, I'm getting the cursor position and handle that (use the <code>onClick</code> event). </p>
  
  <p>The issue happens when I mouse-click and then quickly move the cursor. In result, <code>onClick()</code> handler gets an event containing not proper mouse position - not where the click happened, but where the cursor stopped after the quick move.</p>
  
  <p>In addition to <code>onClick()</code>, I have <code>onMouseMove()</code> handler. And on that quick cursor move, multiple <code>onMouseMove</code> events get fired before the <code>onClick</code> event. </p>
  
  <p>Why does this happen? Is this because of the lower priority of the <code>onClick</code>? Then, how to get the position of mouse-click?</p>
  
  <p>Below is a simplified code that demonstrates the issue:</p>
  
  <pre><code>import React from 'react'
  
  export class MyComponent extends React.Component {
      onClick(e) {
          console.log('ON CLICK, clientX:', e.clientX)
      }
  
      onMouseMove(e) {
          console.log('on move, clientX:', e.clientX)
      }
  
      render() {
        return (
          &lt;div style={{width: 300, height: 300, backgroundColor: 'blue'}}
             onClick={this.onClick} onMouseMove={this.onMouseMove}/&gt;
        )
      }
    }
  </code></pre>