1

I'm trying to get the coordinates of a click event in chrome. The event is generated using onClick handler of a ReactComponent like so:

<img
    onClick={(e) => { console.log('e:', e.clientX, window.scrollX, "pageX", e.pageX);}}
</img>

enter image description here

The resulting value:

enter image description here

Clearly does not match the value as measured by a ruler. This is also manifested when I try and add a div at the position of the click. It doesn't appear at the correct position, but rather at an offset.

Has anybody encountered a similar situation?

Patrick Gunderson
  • 3,263
  • 17
  • 28
juniper-
  • 6,262
  • 10
  • 37
  • 65
  • What about trying `e.pageX` ? – zlwaterfield Dec 16 '16 at 23:03
  • It's the same as `e.clientX`. I updated the question. – juniper- Dec 16 '16 at 23:07
  • The `clientX` value is correct, but that is not what you need: https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent/clientX , https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent/pageX , https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent/offsetX – Teemu Dec 16 '16 at 23:08
  • `The MouseEvent.clientX read-only property provides the horizontal coordinate within the application's client area at which the event occurred` - Isn't the application's client area the area within the browser that is visible at the moment? The ruler spans the width of the browser. – juniper- Dec 16 '16 at 23:10
  • The diffrence between `clientX` and `offsetX` is tied to the CSS, margins and padding ... – Teemu Dec 16 '16 at 23:13
  • Right, but shouldn't `clientX` be relative to the edge of the browser window? – juniper- Dec 16 '16 at 23:15
  • Nope, `pageX`would. Please read the MDN articles I've linked above. – Teemu Dec 16 '16 at 23:20
  • Sorry, I've read the articles and I don't mean to be obtuse, but in this case `clientX` is equal to `pageX` and neither corresponds to the distance from the click event to the browser window. – juniper- Dec 16 '16 at 23:22

1 Answers1

0

Browser window was zoomed in. Cmd - [minus] fixed the event position relative to the ruler. The div positioning was related to the issue described here:

Position fixed not working is working like absolute

Community
  • 1
  • 1
juniper-
  • 6,262
  • 10
  • 37
  • 65