仅每个元素的addEventListener

Question

我想让我的画布仅响应按键/鼠标事件监听器。

另一个用户有此问题： 用于画布上的keydown的addEventListener

但是问题仍然存在：我有一个画布和一个输入框。 我有空格键来触发事件，但是当我想在输入元素框中键入内容时，它也会触发。

如何使键盘按下/鼠标事件专用于画布，以免影响输入等其他元素？

 //js file
 gameCanvas = document.getElementById('gameCanvas');
 document.addEventListener("keydown", function(e){
    if(e.keyCode == 32) // triggers something in canvas
 }, false); 

 //html dom
 <canvas id="gameCanvas" tabindex='1'></canvas>

 //input that accidentally triggers the above event meant for canvas
 <input type="text" id="conversation"></input>

Answer 1

您可以为每个输入/画布创建单独的keydown / click事件。

要使画布响应按键按下，您需要添加tabindex="1" 。

像这样<canvas id="gameCanvas" tabindex="1"></canvas>

当选择了正确的元素时，输入和画布都将响应键盘事件，并在按下键时触发。 如果您喜欢单击事件，只需将keydown替换为click 。

 //js file gameCanvas = document.getElementById('gameCanvas'); conversation = document.getElementById('conversation'); gameCanvas.addEventListener("keydown", function(e){ console.log(gameCanvas); }, false); conversation.addEventListener("keydown", function(e){ console.log(conversation); }, false); 

 #gameCanvas { background: blue; width: 100px; height: 100px; } 

 <p>gamecanvas</p> <canvas id="gameCanvas" tabindex="1"></canvas><br /> <p>conversation</p> <input id="conversation" type="text" tabindex="2"></input> 

Answer 2

画布无法聚焦

如果元素具有焦点，则可以按元素监听键盘事件。 这可能会有些问题，因为画布将无法获得焦点，因此无法收听键盘事件。

最好的选择是使用文档键盘事件并根据当前文档焦点或事件目标来重定向呼叫。

function canvasKeyHandler(event) {
    // handle the key event 

}
document.addEventListener("keydown",(event) => {
    if(event.target.id !== "conversation"){ // redirect to canvas
        canvasKeyHandler(event);
    }else{
        // handle the key event for the input
    }
})

您还可以使用document.activeElement检查哪个元素具有焦点，该document.activeElement返回活动的（焦点）元素。