0

I am trying to display a heatmap of where the user moved their mouse on a screen (using a Chrome extension). I'm using a library called heatmap.js to handle this.

More specifically, I am using this as an example -- https://www.patrick-wied.at/static/heatmapjs/example-mousemove-heatmap.html

My problem is that the site I wish to display this heatmap on is making heavy use of z-index. The issue with this is that when you mouseover an element with a z-index other then auto, the value returned by onmousemove is not what one would expect -- instead of the value of the mouse on the screen, some other value relative to the top left of the screen is returned.

You can see this in action here -- https://jsfiddle.net/rj870o6c/

To counteract this, I tried adding an overlay div on top of the entire page with a z-index of 9999. This works, but then I lose the ability to interact with the page below, and of course, I can not use pointer-events: none; since I need to capture the value of the mouse.

You can see this in action here (try clicking the link in the yellow box, it won't work) -- https://jsfiddle.net/ktwbbpbn/

Is there a way to get the real value of the mouse pointer when hovering over elements that have a z-index?

Any help would be greatly appreciated.

Ian Muscat
  • 235
  • 3
  • 15

1 Answers1

0

So it turns out that the issue was that I was using layerX and layerY for grabbing the position of the mouse. That's a bad idea for my use case because that only returns data relative to the current layer (https://developer.mozilla.org/en/docs/Web/API/UIEvent/layerX). The answer is to use pageX and pageY instead. See this for more info.

For anyone who might find this useful, here's a JSFiddle with everything working as expected -- https://jsfiddle.net/h1us1syr/

Community
  • 1
  • 1
Ian Muscat
  • 235
  • 3
  • 15