2

I have a <div> on a webpage with the following dimensions:

enter image description here

Using Javascript/jQuery I get the following position and dimensions of that element:

$elem.offset()
{top: 1434.4791564941406, left: 32.222225189208984}
$elem.outerWidth()
930
$elem.outerHeight()
536.788

It seems to me that a MouseEvent contains clientX and clientY (or pageX, pageY) coordinates in "number" type.

Question: Why is it that a onmouseenter event fires with a clientX value of 31 or 32 (depending on how quickly I move the mouse), both of which should be outside of the element’s border box.

Question: Converting floats to integers probably isn’t a good idea because of rounding. So, how do I go about checking the border box here: convert the mouse coordinates to floats? Meaning, that a (1434, 32) mouse coordinate is just outside whereas (1435, 33) is barely inside of the bounding box?

Jens
  • 8,423
  • 9
  • 58
  • 78
  • `clientX` value is w.r.t the entire client area of the application (browser), see https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent/clientX – nivendha May 18 '20 at 05:09
  • @nivendha, well [`pageX`](https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent/pageX) has the same value… – Jens May 18 '20 at 05:20
  • hope this clarifies https://stackoverflow.com/questions/6073505/what-is-the-difference-between-screenx-y-clientx-y-and-pagex-y – nivendha May 18 '20 at 05:33
  • 1
    @nivendha, that still doesn’t answer the question: how can I correlate mouse coordinates to the border box of the element. – Jens May 18 '20 at 06:19

0 Answers0