放置在后台时在 html5 画布上捕获鼠标事件答案

【问题标题】：Catching mouse events on html5 canvas when placed in the background放置在后台时在 html5 画布上捕获鼠标事件
【发布时间】：2012-06-04 00:59:06
【问题描述】：

我使用以下方法将 html5 画布放置在后台 style="position:fixed;top:0;left:0;z-index:-1;"

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

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

【问题讨论】：

标签： html canvas

【解决方案1】：

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

为非固定元素构建一个包装器。这也获得了一个 mousemove 事件侦听器。如果 mousemove 在固定元素上方（检查 clientX 和 clientY），则在固定元素上触发 mousemove 事件。

例如用火狐测试：

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.：冒泡不是正确的词，它通常意味着将事件冒泡到父元素。

【讨论】：

完美。适用于所有浏览器。我的包装器是 body 元素，所以我不需要 onWrapperMouseMove 中的 if() 条件。谢谢！
如果 accepting it 解决了您的问题，请考虑作为答案

【解决方案2】：

您可以尝试将叠加元素设置为pointer-events: none，但这仅适用于 Firefox、Chrome 和 Safari。如果您确实想要在它们到达canvas 之前处理某些元素和鼠标事件，这也可能会给您带来一些问题。

【讨论】：