我正在使用 Patrick Wied 的 heatmap.js 構建一個帶有熱圖的網站。我設法讓它作業，我現在正在記錄滑鼠移動事件以及點擊事件。除了在我的網站上添加一些內容外，一切都運行良好：
熱圖的畫布位于最前層，我無法選擇任何文本或單擊任何內容。
我試圖將除畫布之外的所有東西都放在更高的
z-index位置，我可以選擇并與我的內容進行互動，但這次由于畫布位于其他所有內容的后面，當我懸停某些內容時它不會記錄滑鼠事件。
我檢查了heatmap.js 的網站和repo，因為它運行良好，但我找不到任何關于如何獲得類似結果的代碼或解釋。看起來他甚至沒有z-index為達到這個結果而玩。
關于如何解決這個問題的任何想法？
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/[email protected]/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>uj5u.com熱心網友回復：
這就是你如何加點它，通過將它放在content上面，wrapper并為它z-index添加一個事件偵聽content器mousemove。當mousemove被觸發時，content它只會將該事件轉發到wrapper它下面。
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/[email protected]/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>轉載請註明出處，本文鏈接：https://www.uj5u.com/qukuanlian/491216.html
標籤：javascript 热图
下一篇：在陣列中搜索并回傳多個結果