捕捉鼠標事件在後臺

我放置在後臺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

捕捉鼠標事件在後臺

回答

相關問題