Javascript'keydown'事件監聽器無法正常工作

每當我在畫布上移動時，mousemove事件都起作用並調用onMouseMove。儘管keydown和keyup事件從未起作用。我點擊畫布並按下一些鍵，但沒有事件被觸發。有誰知道爲什麼這些事件不起作用？感謝您的任何建議！我正在關注udacity的html5課程，如果有人對代碼的來源感到好奇。Javascript'keydown'事件監聽器無法正常工作

InputEngineClass = Class.extend({ 

keyState: new Array(), 

setup: function() { 
    document.getElementById("gameCanvas").addEventListener('mousemove', gInputEngine.onMouseMove); 
    document.getElementById("gameCanvas").addEventListener('keydown', gInputEngine.onKeyDown); 
    document.getElementById("gameCanvas").addEventListener('keyup', gInputEngine.onKeyUp); 
}, 

onMouseMove: function (event) { 
    console.log("Called onMouseMove"); 
    var posx = event.clientX; 
    var posy = event.clientY; 
}, 

onKeyDown: function (event) { 
    console.log("KEY DOWN!!!"); 
    keyState[event.keyID] = true; 
    gInputEngine.update(); 
}, 

onKeyUp: function (event) { 
    console.log("KEY UP!!!"); 
    keyState[event.keyID] = true; 
}, 

update: function() { 
    KeyW = 87; 

    if(gInputEngine.keyState[KeyW]) console.log("FORWARD!!!"); 
} 
}); 

gInputEngine = new InputEngineClass();

來源

2013-09-21 user1668814

什麼類型的對象是'gameCanvas'？如果它永遠不會獲得鍵盤焦點（或者讓子項目獲得焦點），那麼它將不會獲得鍵盤事件。在發送鍵盤事件之前，對象必須先獲取鍵盤焦點。 – jfriend00

它是這樣創建的帆布： '體=的document.getElementById（「身」）;'' 畫布=使用document.createElement（「畫布」）;'' canvas.setAttribute（「ID」，「 gameCanvas「）;' 'canvas.width = window.innerWidth;' 'canvas.height = window.innerHeight;' 'body.appendChild（canvas）;' – user1668814

謝謝@ jfriend00我搜索了一下鍵盤焦點並確定我這種添加到我的畫布需要： 'canvas.setAttribute（「tabindex屬性」，0）;' – user1668814

我會將我的評論變成一個答案，以便您可以結束這個問題。

對於要接收鍵盤事件的DOM對象，它們必須首先能夠在頁面上獲得鍵盤焦點。只有這樣鍵盤事件纔會被引導到該對象。爲畫布對象做最簡單的方法是給它一個tabIndex屬性。

canvas.setAttribute("tabindex", 0);

你可以看到別人的這個問題在這裏總結：http://www.dbp-consulting.com/tutorials/canvas/CanvasKeyEvents.html

來源

2013-09-21 16:04:23 jfriend00

Javascript'keydown'事件監聽器無法正常工作

回答

相關問題