Question

我有一个<canvas>元素，它跨越我的网页的宽度和高度，就像背景一样。它具有依赖鼠标坐标的交互元素。当画布在它自己的块中时（即没有任何东西），交互元素工作正常。但是现在它已经有了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;，鼠标事件将过滤到你下面的画布。~~发问者需要放置响应按钮在画布上。

如果顶级div确实需要响应鼠标事件，您可能必须在窗口上侦听鼠标事件并将其转换为应用可以响应的画布坐标。

您可以在mousemove上收听window个事件并获取所有动作 - 即使是超过按钮元素也是如此。另请注意mouseout上的window个事件。由于画布跨越窗口，因此当mouseevent.clientX＆amp; mouseevent.clientY报告坐标在窗口外

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中工作（除了所有其他浏览器）

制作帆布寄存器鼠标移动与div

2 个答案: