OiO.lk Community platform!

Oio.lk is an excellent forum for developers, providing a wide range of resources, discussions, and support for those in the developer community. Join oio.lk today to connect with like-minded professionals, share insights, and stay updated on the latest trends and technologies in the development field.
  You need to log in or register to access the solved answers to this problem.
  • You have reached the maximum number of guest views allowed
  • Please register below to remove this limitation

Mouse coordinates relative to currentTarget in React in event handler

  • Thread starter Thread starter johndodo
  • Start date Start date
J

johndodo

Guest
I have an outer div which catches onWheel mouse events. In the handler I would like to know the mouse pointer coordinates relative to the outer div. For example:

Code:
constructor() {
  this.handleWheel = this.handleWheel.bind(this);
}

handleWheel(event) {
  // how do I get mouse position relative to the outer div here?
}

render() {
  return (
    <div onWheel={this.handleWheel}>
      ...
      <img src="..." />
      ...
    </div>
  )
}

When I move mouse pointer over the image and scroll mousewheel, event.target is set to <img> and event.currentTarget is set to <div>. I can also get the mouse position relative to event.target (event.nativeEvent.offsetX/Y), but that doesn't help me because I don't know the position of <img> relative to <div>.

In other words, I'm stuck... How do I get the mouse position relative to the element that has a handler attached?

<p>I have an outer div which catches <code>onWheel</code> mouse events. In the handler I would like to know the mouse pointer coordinates <em>relative to the outer div</em>. For example:</p>

<pre><code>constructor() {
this.handleWheel = this.handleWheel.bind(this);
}

handleWheel(event) {
// how do I get mouse position relative to the outer div here?
}

render() {
return (
<div onWheel={this.handleWheel}>
...
<img src="..." />
...
</div>
)
}
</code></pre>

<p>When I move mouse pointer over the image and scroll mousewheel, <code>event.target</code> is set to <code><img></code> and <code>event.currentTarget</code> is set to <code><div></code>. I can also get the mouse position relative to <code>event.target</code> (<code>event.nativeEvent.offsetX/Y</code>), but that doesn't help me because I don't know the position of <code><img></code> relative to <code><div></code>. </p>

<p>In other words, I'm stuck... How do I get the mouse position relative to the element that has a handler attached?</p>
 

Online statistics

Members online
0
Guests online
4
Total visitors
4
Top