I'm building a website with a heatmap on it with heatmap.js by Patrick Wied. I manage to make it work and I'm now recording mouse move events as well as click events. Everything works very well except when I add some content on my website:
The canvas for the heatmap is on the front layer and I can't select any text or click anything.
I tried to put everything else than the canvas with a higher z-index, I can select and interact with my content but this time as the canvas is behind everything else, it does no record mouse events when I'm hovering some content.
I checked the website and repo of heatmap.js as it works perfectly, though I can't find any code or explanation on how to have a similar result. It looks like he isn't even playing with z-index to achieve this result.
Any idea on how to solve this problem?
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>This is how you dot it, put the content above the wrapper by giving it higher z-index and add an event listener to content for the mousemove. when mousemove is fired on content it will simply froward that event to wrapper beneath it.
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>