javascript - 使canvas注册鼠标移动并在div上方移动

Question

我有一个<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;
        }       
        .....
       }

Answer 1

如果您不需要顶部 div 具有鼠标感知功能，请设置其 CSS pointer-events:none;，鼠标事件将过滤到下面的 Canvas 。 提问者需要在 Canvas 上放置响应式按钮。

如果顶部 div 确实需要响应鼠标事件，您可能必须监听窗口上的鼠标事件并将它们转换为应用程序可以响应的 Canvas 坐标。

您可以监听窗口上的mousemove事件并获取所有移动——即使是在按钮元素上。还要监听窗口上的mouseout事件。由于 Canvas 跨越窗口，您知道当 mouseevent.clientX 和 mouseevent.clientY 报告坐标位于窗口之外时会发生 mouseout