mouseEvent doesn't have offsetX/offsetY

[imevro]

I try get position of click relative to element, but event doesn't have offsetX.

onClick(e) {
  console.log(e.offsetX) // returns undefined
  console.log(e.target.offsetX) // returns undefined
}

render() {
  return <img src='http://placehold.it/1000x500' onClick={this.onClick} />
}

How I can get position of click in element?

[imevro]

Oh, well, I see.
I get it from e.nativeEvent.offsetX. Is it right approach?

[waldreiter]

This shows all available values:

onClick(event) {
  event.persist();
  console.log(event);
}

Using the nativeEvent is fine.

[imevro]

@cody thanks!

[quantizor]

👍 Please close if you're happy with the answer and there is no found bug(s).

[sophiebits]

You probably want pageX or clientX and if you want it relative to another element you can use getBoundingClientRect on that element – if you do that it should work well across browsers.

[glenjamin]

offsetX/Y appear to be on the standards track and supported in all major browsers.

Any chance of adding them into React - perhaps with a getBoundingClientRect shim for browsers which don't support it?

https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent/offsetX

[sophiebits]

That seems reasonable enough if we can do it with no performance compromise so I'll reopen this, but it won't be a high priority for us.

[git-richard]

I did some work on this and it would require a polyfill. As a property in SyntheticMouseEvent it would execute for every mouse event, which would have a performance impact. It could be added as a method that executed on-demand but then it wouldn't match the native MouseEvent interface.

[syranide]

#7011

[gaearon]

I’ll close since we decided to not merge #7011.

[Jarred-Sumner]

As of 2020, this doesn't seem to need a polyfill. But SyntheticEvent's MouseEvent doesn't have offsetX or offsetY

I can submit a PR if you want

https://caniuse.com/#feat=mdn-api_mouseevent_offsetx

[amerllica]

@gaearon, Why ReactJs mouseEvent doesn't have which, offsetX, offsetY and etc?

Why the Facebook developers add them into e.nativeEvent?

[mlajtos]

Why the Facebook developers add them into e.nativeEvent?

@amerllica e.nativeEvent is created by the browser, so if there is e.nativeEvent.offsetX the browser supports it. Why the attribute does not propagate to synthetic event, that is question to React team.

[acenturyandabit]

Can we reopen this? offsetX would make it a lot easier to implemenet encapsulated event handlers.

[Patilritik]

Is there any solution offer by react , other then the getBoundingClientRect and e.nativeEvent for handling the mouse event ??

[TomasHubelbauer]

This was closed in 2016. It's 2024 and offsetX/offsetY is baseline level of support:

• https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent/offsetX
• https://caniuse.com/mdn-api_mouseevent_offsetx

@sebmarkbage you're the most active maintainer during the past month: https://github.com/facebook/react/graphs/contributors. @gaearon, who initially engaged in this thread and ultimately closed in the issue in 2016 is no longer working on React presumably since he moved to Bluesky. Can this be re-opened?