javascript - Getting the Mouse's X and Y coordinates with respect to an arbitrary Dom element in React -

i'm looking reliable way retrieve x , y coordinates of mouse in terms of arbitrary dom element, during events onmousemove, onmouseup, , onmousedown.

when writing vanilla javascript use e.layerx , e.layery number appears correct. though, in mozilla docs, recommend against using it. moving react, (in specific components render function)

return <canvas onmousemove={ e => this.handlemousemoved(e) }></canvas>.

i no longer have access layerx or layery. cannot access offsetx in past have used in conjunction clientx or clienty derive element relative coordinates of mouse.

there many different ways read coordinates. i'm confused meaning , when should used. if want see x: 0, y: 0 when mouse on top-left corner, , x: <domelement.width>, y: <domelement.height when mouse on bottom-right corner, event/synthetic-event should looking at?

react uses syntheticevents , "pools" events improve performance (https://facebook.github.io/react/docs/events.html#event-pooling)

to "native" event must saved synthetic event since react's syntheticevent "will reused , properties nullified after event callback has been invoked".

what mean?

<canvas onmousemove={ e => {    let nativeevent = e.nativeevent;   this.handlemousemoved(nativeevent);  }></canvas> 

the nativeevent have offsetx/y, layerx/y etc looking for.