對於在畫布上的keydown的addEventListener

我想製作一個響應鍵盤和鼠標輸入的畫布應用程序。我有這樣的代碼：對於在畫布上的keydown的addEventListener

canvas = document.getElementById('canvas'); 
canvas.addEventListener('mousedown', function(event) { 
    alert('mousedown'); 
     }, false); 
canvas.addEventListener('keydown', function(event) { 
    alert('keydown'); 
     }, false);

無論何時點擊鼠標，'keydown'警報都不會出現，'mousedown'警報就會出現。相同的代碼在JS Bin上工作正常：http://jsbin.com/uteha3/66/

爲什麼它不在我的頁面上工作？畫布不能識別鍵盤輸入嗎？

來源

2012-10-14 Cbas

你可以用」 t聚焦一個畫布元素。 –

'keydown'可能只有在焦點上纔會在畫布上觸發。我不確定一個畫布元素是否可以擁有焦點。 –

編輯 - 這個答案是一個解決方案，但一個更簡單的和適當的方法將被設置畫布元素的屬性tabindex（由hobberwickey的建議）。

~~您無法集中畫布元素。一個簡單的工作就是讓你「專注」自己的焦點。~~

var lastDownTarget, canvas; 
window.onload = function() { 
    canvas = document.getElementById('canvas'); 

    document.addEventListener('mousedown', function(event) { 
     lastDownTarget = event.target; 
     alert('mousedown'); 
    }, false); 

    document.addEventListener('keydown', function(event) { 
     if(lastDownTarget == canvas) { 
      alert('keydown'); 
     } 
    }, false); 
}

JSFIDDLE

來源

2012-10-14 21:00:28

工程就像一個魅力...感謝兄弟的最佳解決方案。 –

舊的答案，但即使在2012年，你絕對可以：你需要給畫布一個'tabindex =「」'和presto：你的畫布（但真的*任何* HTML元素）現在可以正常工作。這個答案不應該被標記爲正確的，而是接受hobberwickey的回答。 –

我同意你的觀點，但無論出於何種原因，@Cbas從未接受過hobberwickeys的回答。我已更新我的帖子，供將來的訪問者解決此問題。 –

設置畫布元素的tabindex屬性爲1或像這樣

<canvas tabindex='1'></canvas>

這是一個老把戲，使可聚焦的任何元素

來源

2012-10-14 22:35:02 hobberwickey

也可以。 – Cbas

不工作，至少在最新的鉻。 –

我會賭你一百萬美元，它確實http://jsfiddle.net/WJhGr/1/ – hobberwickey

對於在畫布上的keydown的addEventListener

回答

相關問題