# How to get the offsetX and offsetY for component pointer events

**URL:** <https://forum.inductiveautomation.com/t/how-to-get-the-offsetx-and-offsety-for-component-pointer-events/52372>\
**Category:** Ignition\
**Tags:** perspective\
**Created:** [October 26, 2021, 10:21pm UTC](https://forum.inductiveautomation.com/t/how-to-get-the-offsetx-and-offsety-for-component-pointer-events/52372 "2021-10-26T22:21:56Z")\
**Posts on this page:** 8\
**Page:** 1

<div class="post-metadata">

**Author:** ![nathan1](https://avatars.discourse-cdn.com/v4/letter/n/8baadc/32.png) [@nathan1](https://forum.inductiveautomation.com/u/nathan1)\
**Post date:** [October 26, 2021, 10:21pm UTC](https://forum.inductiveautomation.com/t/how-to-get-the-offsetx-and-offsety-for-component-pointer-events/52372/1 "2021-10-26T22:21:56Z")

</div>

I see that pointer events in Perspective provide access to the coordinates below which seem to all be relative to the document, window or screen. I need the coordinates relative to the target element (component) that was clicked though. In javascript this is offsetX and offsetY. Is there any way to get this in Perspective?

```auto
clientX (int | float): The X coordinate in local coordinates.
clientY (int | float): The Y coordinate in local coordinates.
pageX (int | float): The X coordinate relative to the whole document.
pageY (int | float): The Y coordinate relative to the whole document.
screenX (int | float): The X coordinate in global (screen) coordinates.
screenY (int | float): The Y coordinate in global (screen) coordinates.

```

---

<div class="post-metadata">

**Author:** ![victordcq](https://avatars.discourse-cdn.com/v4/letter/v/f6c823/32.png) [@victordcq](https://forum.inductiveautomation.com/u/victordcq)\
**Post date:** [October 27, 2021, 7:46am UTC](https://forum.inductiveautomation.com/t/how-to-get-the-offsetx-and-offsety-for-component-pointer-events/52372/2 "2021-10-27T07:46:55Z")

</div>

Not realy.  
There seem to be a few more properties hidden in the event, but not all of them (for some unknown reason).  
The only way to change that would be creating your own module or asking a feature request and hope igntion does it one day

---

<div class="post-metadata">

**Author:** ![cmallonee](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/cmallonee/32/6416_2.png) [@cmallonee](https://forum.inductiveautomation.com/u/cmallonee)\
**Post date:** [October 27, 2021, 2:32pm UTC](https://forum.inductiveautomation.com/t/how-to-get-the-offsetx-and-offsety-for-component-pointer-events/52372/3 "2021-10-27T14:32:12Z")

</div>

We’re providing properties of the MouseEvent (not Pointer Event). In looking at the [documentation](https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent) for that event, it seems that although there are indeed `offset` properties available, those properties are documented as “experimental” and their behavior is “likely to change in the future” (note the beaker). Until they are no longer experimental and we can “guarantee” their behavior, we will not be adding them to Perspective.

---

<div class="post-metadata">

**Author:** ![nathan1](https://avatars.discourse-cdn.com/v4/letter/n/8baadc/32.png) [@nathan1](https://forum.inductiveautomation.com/u/nathan1)\
**Post date:** [October 27, 2021, 4:12pm UTC](https://forum.inductiveautomation.com/t/how-to-get-the-offsetx-and-offsety-for-component-pointer-events/52372/4 "2021-10-27T16:12:59Z")

</div>

That is surely a bug in their documentation since offsetX and offsetY have been part of the MouseEvent spec since 2009 and have been supported in every major browser for over a decade. Even according to MDN’s over definition of “experimental”, a feature of is no longer considered experimental if it is supported in two or more major browsers. I will create a PR to update its status and see what they say.

Also, pageX and pageY are implemented in Perspective and are also listed as experimental.

---

<div class="post-metadata">

**Author:** ![nathan1](https://avatars.discourse-cdn.com/v4/letter/n/8baadc/32.png) [@nathan1](https://forum.inductiveautomation.com/u/nathan1)\
**Post date:** [November 2, 2021, 2:36am UTC](https://forum.inductiveautomation.com/t/how-to-get-the-offsetx-and-offsety-for-component-pointer-events/52372/5 "2021-11-02T02:36:05Z")

</div>

PR here [MouseEvent - remove experimental on features and tidy by hamishwillee · Pull Request #10220 · mdn/content · GitHub](https://github.com/mdn/content/pull/10220)  
There were several other items marked as experimental that are being updated, including pageX and pageY.

---

<div class="post-metadata">

**Author:** ![nathan1](https://avatars.discourse-cdn.com/v4/letter/n/8baadc/32.png) [@nathan1](https://forum.inductiveautomation.com/u/nathan1)\
**Post date:** [November 5, 2021, 1:46pm UTC](https://forum.inductiveautomation.com/t/how-to-get-the-offsetx-and-offsety-for-component-pointer-events/52372/6 "2021-11-05T13:46:28Z")

</div>

@cmallonee Experimental status has now been removed from offsetX and offsetY as well as a few other things. [MouseEvent - remove experimental on features and tidy by hamishwillee · Pull Request #10220 · mdn/content · GitHub](https://github.com/mdn/content/pull/10220)

---

<div class="post-metadata">

**Author:** ![paul-griffith](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/paul-griffith/32/37249_2.png) [@paul-griffith](https://forum.inductiveautomation.com/u/paul-griffith)\
**Post date:** [November 5, 2021, 2:24pm UTC](https://forum.inductiveautomation.com/t/how-to-get-the-offsetx-and-offsety-for-component-pointer-events/52372/7 "2021-11-05T14:24:16Z")

</div>

The (erroneous) experimental status of the properties is irrelevant.  
We’re encoding React MouseEvent objects to JSON to send to the backend, and they don’t have `offsetX` or `offsetY` properties (for whatever reason):

> **[SyntheticEvent – React](https://reactjs.org/docs/events.html#mouse-events)**
>
> A JavaScript library for building user interfaces

---

<div class="post-metadata">

**Author:** ![paul-griffith](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/paul-griffith/32/37249_2.png) [@paul-griffith](https://forum.inductiveautomation.com/u/paul-griffith)\
**Post date:** [November 5, 2021, 2:26pm UTC](https://forum.inductiveautomation.com/t/how-to-get-the-offsetx-and-offsety-for-component-pointer-events/52372/8 "2021-11-05T14:26:38Z")

</div>

> <https://github.com/facebook/react/issues/4431>
>
> 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?

We _could_ add `nativeEvent` to the mouse event you’re given, but then you’re subject to cross-browser limitations, which we try pretty hard to avoid in Perspective.
