使 canvas 注册鼠标移动 div

Question

我有一个跨越我网页宽度和高度的 <canvas> 元素，就像背景一样。它具有依赖于鼠标坐标的交互元素。当 canvas 在它自己的块中时（即没有任何内容），交互元素工作正常。但是现在它上面有 div，它没有接受任何鼠标交互。

下面是我的 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 确实需要响应鼠标事件，您可能需要在 window 上监听鼠标事件并将其转换为您的应用程序可以响应的 canvas 坐标。

您可以在 window 上侦听 mousemove 事件并获取所有移动 - 即使在按钮元素上也是如此。同时监听 window 上的 mouseout 事件。由于 canvas 跨越 window，您知道当 mouseevent.clientX 和 mouseevent.clientY 报告坐标在 window

之外时会发生 mouseout

Answer 2

解决了我从另一个 SO 答案中找到的代码的问题，我稍作修改。

function simulate(e) {
        var evt = document.createEvent("MouseEvents");
        evt.initMouseEvent("mousemove", true, true, window,
    0, e.screenX, e.screenY, e.clientX, e.clientY, false, false, false, false, 0, null);
        canvas.dispatchEvent(evt);
        console.log("Emulated.");
    }

    $("body > section, body > header").each(function(){
        this.addEventListener("mousemove", simulate);
    });

另外，作为旁注。将鼠标代码中的原始 layerX 和 layerY 更改为 offsetX 和 offsetY 以在 firefox 中工作（除了所有其他浏览器之外）

使 canvas 注册鼠标移动 div

making canvas register mouse move with div over it

html

javascript

jquery

canvas

event-listener