捕捉鼠标事件在后台

我放置在后台HTML5画布使用以下风格=“位置是：固定;顶部：0;左：0; z索引：-1;”捕捉鼠标事件在后台

在我的window.onload（），我增加了鼠标事件监听到画布如下 canvas.addEventListener（“鼠标移动”，的OnMouseMove，FALSE）但不幸的是我的画布不接收任何鼠标事件。你如何沿z轴传播事件？是否有可能不使用任何外部库（如果存在）？

我试图寻找，但未能找到任何相关信息为止。

来源

2012-06-03 Anshul

你想“泡”从没有-固定元素的mousemove事件与父母不同的固定元素？我认为你必须检查并触发你自己：

建立了无固定元件（S）的包装。这也得到了一个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 .:冒泡不是正确的词，它通常意味着将事件冒泡给父元素。

来源

2012-06-03 12:00:54 scessor

完美。适用于所有浏览器。我的包装是body元素，所以我不需要onWrapperMouseMove中的if（）条件。谢谢！ – Anshul

那么你应该接受这个问题。 – Wes

考虑[接受它]（http://meta.stackexchange.com/q/5234/179419）作为一个答案，如果它解决了你的问题 – cviejo

你可以尝试设置重叠元素pointer-events: none但这只会在Firefox，Chrome和Safari浏览器工作。如果您在碰到canvas之前确实需要处理某些元素和鼠标事件，则可能会导致一些问题。

来源

2012-06-03 16:59:06 robertc

捕捉鼠标事件在后台

回答

相关问题