Catching mouse events on html5 canvas when placed in the background
我使用以下命令将html5画布放置在背景中
style = " position：fixed; top：0; left：0; z-index：-1; "
在我的window.onload()上，将鼠标事件侦听器添加到画布，如下所示
canvas.addEventListener(\\'mousemove \\'，onMouseMove，false)
但是很遗憾，我的画布没有收到任何鼠标事件。如何沿z轴传播事件？是否可以在不使用任何外部库的情况下(如果存在)进行操作？
我尝试搜索它，但到目前为止找不到任何相关的内容。
您想"使" mousemove事件从非固定元素"冒泡"到具有不同父元素的固定元素吗？我认为您必须自己检查并触发：
为无固定元素构建package。这也获得了mousemove事件侦听器。如果mousemove在固定元素上(检查clientX和clientY)，则在固定元素上触发mousemove事件。
例如使用firefox测试：
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 | 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); }; |
另请参见本示例。
P.s .：冒泡不是正确的词，通常意味着将事件冒泡到父元素。
您可以尝试将覆盖的元素设置为