사용자가 Chrome 확장 프로그램을 사용하여 화면에서 마우스를 움직인 위치의 히트 맵을 표시하려고합니다. 나는 이것을 처리하기 위해 heatmap.js이라는 라이브러리를 사용하고 있습니다.onmousemove는 Z- 인덱스가있는 요소보다 다른 값을 반환합니다.
보다 구체적으로는, 내가 예를 들어이 사용하고 - https://www.patrick-wied.at/static/heatmapjs/example-mousemove-heatmap.html
내 문제는 내가 원하는 사이트가 z-index를 많이 사용하고 있습니다에이 히트 맵을 표시하는 것입니다. 이 문제는 z-index이 아닌 다른 요소를 마우스 오버 할 때 이 반환하는 값이 화면에 표시되는 마우스 값 대신 왼쪽 위를 기준으로 한 다른 값이 아닌 것으로 예상됩니다. 화면이 반환됩니다.
현재 작업에서 볼 수 있습니다 - https://jsfiddle.net/rj870o6c/
는 이에 대응하기 위해, 나는 9999의 z-index와 전체 페이지의 상단에 오버레이 사업부를 추가했습니다. 이 작동하지만 아래 페이지와 상호 작용할 수있는 능력을 잃게됩니다. 물론 마우스 값을 캡처해야하므로 pointer-events: none;을 사용할 수 없습니다.
현재 행동이를 볼 수 있습니다 (노란색 상자에있는 링크를 클릭하십시오, 그것은 작동하지 않습니다) - https://jsfiddle.net/ktwbbpbn/
위로 가져 가면 때 마우스 포인터의 실제 값을 얻을 수있는 방법이 있나요 z-index이있는 요소?
도움을 주시면 감사하겠습니다.