onmousemove renvoie une valeur différente sur les éléments avec z-index

Question

J'essaie d'afficher une carte thermique de l'endroit où l'utilisateur a déplacé sa souris sur un écran (en utilisant une extension Chrome). J'utilise une bibliothèque appelée heatmap.js pour gérer cela.

Plus précisément, je me sers comme un exemple - https://www.patrick-wied.at/static/heatmapjs/example-mousemove-heatmap.html

Mon problème est que le site que je souhaite afficher ce heatmap sur est fait un usage intensif de z-index. Le problème avec ceci est que lorsque vous survolez un élément avec z-index autre que auto, la valeur retournée par onmousemove n'est pas ce à quoi on s'attendrait - au lieu de la valeur de la souris sur l'écran, une autre valeur par rapport au coin supérieur gauche de l'écran est retourné.

Vous pouvez le voir en action ici - https://jsfiddle.net/rj870o6c/

Pour contrer cela, j'ai essayé d'ajouter un div de superposition en haut de la page entière avec un z-index de 9999. Cela fonctionne, mais ensuite je perds la capacité d'interagir avec la page ci-dessous, et bien sûr, je ne peux pas utiliser pointer-events: none; car j'ai besoin de capturer la valeur de la souris.

Vous pouvez le voir en action ici (essayez de cliquer sur le lien dans la boîte jaune, il ne fonctionnera pas) - https://jsfiddle.net/ktwbbpbn/

Y at-il un moyen d'obtenir la valeur réelle du pointeur de la souris en vol stationnaire au-dessus de éléments qui ont un z-index?

Toute aide serait grandement appréciée.

Answer 1

Donc, il s'est avéré que le problème était que j'utilisais layerX et layerY pour saisir la position de la souris. C'est une mauvaise idée pour mon cas d'utilisation car cela ne renvoie que des données relatives à la couche en cours (https://developer.mozilla.org/en/docs/Web/API/UIEvent/layerX). La réponse est d'utiliser pageX et pageY à la place. Voir this pour plus d'informations.

Pour ceux qui pourraient trouver cela utile, voici un JSFiddle avec tout fonctionne comme prévu - https://jsfiddle.net/h1us1syr/