Question

我使用以下内容将html5画布放在后台风格= “位置是：固定;顶部：0;左：0; z索引：-1;”

在我的window.onload（）上，我正在向画布添加一个鼠标事件监听器，如下所示 canvas.addEventListener（'mousemove'，onMouseMove，false）但不幸的是我的画布没有收到任何鼠标事件。如何沿z轴传播事件？是否可以在不使用任何外部库（如果存在）的情况下执行此操作？

我尝试搜索它但到目前为止找不到任何相关内容。

Answer 1

你想将一个mousemove事件从一个非固定元素“冒泡”到一个具有不同父元素的固定元素？我认为你必须检查并触发你自己的：

为无固定元素构建包装器。这也是一个mousemove事件监听器。如果mousemove在固定元素上（检查clientX和clientY），则在固定元素上触发mousemove事件。

E.g。用firefox测试：

function onCanvasMouseMove(oEvent) {
    console.log(oEvent);
}

// wrapper mousemove handler: 
// if the mouse is over the canvas, trigger mousemove event on it.
function onWrapperMouseMove(oEvent) {
    if (
        oEvent.clientX <= oCanvas.offsetWidth
        && oEvent.clientY <= oCanvas.offsetHeight
    ) {
        oEvent.stopPropagation();
        var oNewEvent = document.createEvent("MouseEvents");
        oNewEvent.initMouseEvent("mousemove", true, true, window, 0, oEvent.screenX, oEvent.screenY, oEvent.clientX, oEvent.clientY, false, false, false, false, 0, null);
        oCanvas.dispatchEvent(oNewEvent);
    }
}

var oCanvas;

window.onload = function() {
    oCanvas = document.getElementById('canvas');
    oCanvas.addEventListener('mousemove', onCanvasMouseMove, false);
    // add mousemove listener to none-fixed wrapper
    var oWrapper = document.getElementById('wrapper');
    oWrapper.addEventListener('mousemove', onWrapperMouseMove, false);
};

另见this example。

P.s。：冒泡不是正确的词，它通常意味着将事件冒泡到父元素。

Answer 2

您可以尝试将重叠元素设置为pointer-events: none，但这仅适用于Firefox，Chrome和Safari。如果在命中canvas之前有一些元素和鼠标事件需要处理，它也可能会导致一些问题。

放置在背景中时，在html5画布上捕捉鼠标事件

2 个答案: