onmousemove返回不同​​值與z-index元素

Question

我想顯示用戶在屏幕上移動鼠標（使用Chrome擴展）的位置的熱圖。我正在使用名爲heatmap.js的庫來處理這個問題。

更具體地說，我使用這個作爲一個例子 - https://www.patrick-wied.at/static/heatmapjs/example-mousemove-heatmap.html

我的問題是，我想在網站上顯示正在大量使用的z-index這個熱圖。與此問題是，當您用z-index而不是auto鼠標滑過某個元素時，onmousemove返回的值不是人們所期望的值 - 而不是屏幕上鼠標的值，而是相對於左上角的某個其他值屏幕返回。

您可以在這裏的行動看到這一點 - https://jsfiddle.net/rj870o6c/

爲了解決這個問題，我想在整個頁面的頂部添加的覆蓋DIV與9999一個z-index。這可行，但我失去了與下面的頁面交互的能力，當然，我不能使用pointer-events: none;，因爲我需要捕獲鼠標的值。

你可以看到這個動作在這裏（試着點擊黃色框中的鏈接，它不會工作） - https://jsfiddle.net/ktwbbpbn/

有沒有辦法上空盤旋時，爲了獲得鼠標指針的真正價值有z-index的元素？

任何幫助將不勝感激。

Answer 1

所以事實證明，問題是我使用layerX和layerY來抓取鼠標的位置。對我的用例來說這是一個糟糕的主意，因爲它只返回相對於當前圖層的數據（https://developer.mozilla.org/en/docs/Web/API/UIEvent/layerX）。答案是使用pageX和pageY代替。有關更多信息，請參閱this。

對於任何人可能會覺得這有用，這裏是JSFiddle與一切工作正常 - https://jsfiddle.net/h1us1syr/