Estoy creando un sitio web con un mapa de calor con heatmap.js de Patrick Wied. Me las arreglé para que funcione y ahora estoy grabando eventos de movimiento del mouse, así como eventos de clic. Todo funciona muy bien excepto cuando agrego algún contenido en mi sitio web:
El lienzo del mapa de calor está en la capa frontal y no puedo seleccionar ningún texto ni hacer clic en nada.
Traté de poner todo lo que no sea el lienzo con un z-index más alto, puedo seleccionar e interactuar con mi contenido, pero esta vez, como el lienzo está detrás de todo lo demás, no registra los eventos del mouse cuando muevo algún contenido.
Revisé el sitio web y el repositorio de heatmap.js ya que funciona perfectamente, aunque no puedo encontrar ningún código o explicación sobre cómo tener un resultado similar. Parece que ni siquiera está jugando con z-index para lograr este resultado.
¿Alguna idea sobre cómo resolver este problema?
var heatmapInstance = h337.create({ container: document.querySelector('#heatmap'), radius: 30 }); document.querySelector('.wrapper').onmousemove = function(ev) { heatmapInstance.addData({ x: ev.layerX, y: ev.layerY, value: 1 }); }; body { position: relative; width: 100% height: auto; } .wrapper { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } .wrapper #heatmap { position: relative; height: 100%; width: 100%; } <script src="https://cdn.jsdelivr.net/npm/heatmapjs@2.0.2/heatmap.min.js"></script> <body> <div class="wrapper"> <div id="heatmap"></div> </div> <div class="content"> <button> Click me! </button> <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Consequatur animi ipsum fugit quibusdam excepturi quidem sequi vitae, dolor dignissimos ad rerum neque nam itaque illo perspiciatis eligendi, deserunt repellat in?</p> <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Consequatur animi ipsum fugit quibusdam excepturi quidem sequi vitae, dolor dignissimos ad rerum neque nam itaque illo perspiciatis eligendi, deserunt repellat in?</p> <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Consequatur animi ipsum fugit quibusdam excepturi quidem sequi vitae, dolor dignissimos ad rerum neque nam itaque illo perspiciatis eligendi, deserunt repellat in?</p> </div> </body>Así es como lo puntea, coloque el content sobre el wrapper dándole un z-index más alto y agregue un detector de eventos al content para el movimiento del mousemove . cuando mousemove se activa en el content , simplemente reenviará ese evento para wrapper debajo de él.
var heatmapInstance = h337.create({ container: document.querySelector('#heatmap'), radius: 30 }); document.querySelector('.wrapper').onmousemove = function(ev) { heatmapInstance.addData({ x: ev.clientX, y: ev.clientY, value: 1 }); }; document.querySelector('.content').onmousemove = function(ev) { let event = new ev.constructor( ev.type,ev) document.querySelector('.wrapper').dispatchEvent(event) }; body { position: relative; width: 100%; height:100vh; } .wrapper { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } .wrapper #heatmap { position: relative; height: 100%; width: 100%; } .content{ position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index:3 } <script src="https://cdn.jsdelivr.net/npm/heatmapjs@2.0.2/heatmap.min.js"></script> <body> <div class="wrapper"> <div id="heatmap"></div> </div> <div class="content"> <button> Click me! </button> <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Consequatur animi ipsum fugit quibusdam excepturi quidem sequi vitae, dolor dignissimos ad rerum neque nam itaque illo perspiciatis eligendi, deserunt repellat in?</p> <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Consequatur animi ipsum fugit quibusdam excepturi quidem sequi vitae, dolor dignissimos ad rerum neque nam itaque illo perspiciatis eligendi, deserunt repellat in?</p> <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Consequatur animi ipsum fugit quibusdam excepturi quidem sequi vitae, dolor dignissimos ad rerum neque nam itaque illo perspiciatis eligendi, deserunt repellat in?</p> </div> </body>