1

我使用以下 style="position:fixed;top:0;left:0;z-index:-1;" 将 html5 画布放置在背景中

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

我试图搜索它，但到目前为止找不到任何相关的东西。

4

2 回答 2

1

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

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

例如用 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);
};

另请参阅此示例。

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

于 2012-06-03T12:00:54.250 回答
0

您可以尝试将叠加元素设置为，pointer-events: none但这仅适用于 Firefox、Chrome 和 Safari。如果有一些元素和鼠标事件在点击canvas.

于 2012-06-03T16:59:06.247 回答