React: onClick() event provides wrong cursor coordinates

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 onClick event).

The issue happens when I mouse-click and then quickly move the cursor. In result, onClick() handler gets an event containing not proper mouse position - not where the click happened, but where the cursor stopped after the quick move.

In addition to onClick(), I have onMouseMove() handler. And on that quick cursor move, multiple onMouseMove events get fired before the onClick event.

Why does this happen? Is this because of the lower priority of the onClick? Then, how to get the position of mouse-click?

Below is a simplified code that demonstrates the issue:

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 (
        <div style={{width: 300, height: 300, backgroundColor: 'blue'}}
           onClick={this.onClick} onMouseMove={this.onMouseMove}/>
      )
    }
  }

If you need the value of clientX exactly the moment you press the mouse click, you should use onmousedown (onMouseDown for React) instead.

Here is a working example.

For onclick to be triggered, both mousedown + mouseup(button release) of your left mouse button should occur. Thus, if the mouse is moved in the meantime (while you are still holding the button), your log will end up with the value of your final position.