我有一个<canvas>
跨越网页宽度和高度的元素,例如背景。它具有依赖鼠标坐标的交互元素。当 Canvas 位于它自己的 block 中(即上面没有任何东西)时,交互元素工作正常。但现在它上面有 div,它不会接收任何鼠标交互。
下面是我的 mousemove 的 javascript 代码。为什么顶部的项目会影响它拾取鼠标 xy 坐标,以及如何修复它?
var mouse = {x:-100,y:-100};
var mouseOnScreen = false;
canvas.addEventListener('mousemove', MouseMove, false);
canvas.addEventListener('mouseout', MouseOut, false);
var MouseMove = function(e) {
if (e.layerX || e.layerX == 0) {
//Reset particle positions
mouseOnScreen = true;
mouse.x = e.layerX - canvas.offsetLeft;
mouse.y = e.layerY - canvas.offsetTop;
}
}
var MouseOut = function(e) {
mouseOnScreen = false;
mouse.x = -100;
mouse.y = -100;
}
var update = function(){
var i, dx, dy, sqrDist, scale;
//...... this chunk is the only part of the function that references the mouse
dx = parts[i].x - mouse.x;
dy = parts[i].y - mouse.y;
sqrDist = Math.sqrt(dx*dx + dy*dy);
if (sqrDist < 20){
parts[i].r = true;
}
.....
}
最佳答案
如果您不需要顶部 div 具有鼠标感知功能,请设置其 CSS 提问者需要在 Canvas 上放置响应式按钮。pointer-events:none;
,鼠标事件将过滤到下面的 Canvas 。
如果顶部 div 确实需要响应鼠标事件,您可能必须监听窗口上的鼠标事件并将它们转换为应用程序可以响应的 Canvas 坐标。
您可以监听窗口
上的mousemove
事件并获取所有移动——即使是在按钮元素上。还要监听窗口
上的mouseout
事件。由于 Canvas 跨越窗口,您知道当 mouseevent.clientX 和 mouseevent.clientY 报告坐标位于窗口之外时会发生 mouseout
关于javascript - 使canvas注册鼠标移动并在div上方移动,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/38668530/