给键码2不同的功能

Question

我正在使用代码来使空格键为HTML 5游戏做些事情。它效果很好，但显示游戏的页面也有一个搜索框，访问者将无法在该页面的搜索框中正确使用空格键。

以下是我用于游戏页面空格键的代码。

搜索框是输入类型的搜索，所以我想知道是否可以使一个函数：搜索，以恢复空格键在搜索框内正常工作。

var hit = document.getElementById("hit"); 

document.onkeydown = function(e) 
{ 
    if (e.keyCode == 32) 
    { 
     e.preventDefault(); 
     hit.click(); 
    } 
}; 

感谢

Answer 1

有很多方法可以做到这一点，这里有一个：

var hit = document.getElementById("hit"); 

document.onkeydown = function(e) { 
    if (e.keyCode == 32) { 
    if (e.currentTarget.type === 'input') { //Or whatever check you want here 
     // Do things for your searchBox 
     return; //Prevent rest of the function from running 
    } 
    e.preventDefault(); 
    hit.click(); 
    } 
}; 

Answer 2

里面你必须检查光标在搜索框上面的函数，如果然后跳过功能的其余部分

已经重写你的代码如下，希望它有帮助

var hit = document.getElementById("hit"); 
document.onkeydown = function(e) 
{ 

if (document.activeElement.nodeName != 'TEXTAREA' && document.activeElement.nodeName != 'INPUT') { 

    if (e.keyCode == 32) 
    { 
     e.preventDefault(); 
     hit.click(); 
    } 
} 
}; 

干杯队友！

Answer 3

你可以通过调用event.stopPropagation()停止从搜索栏“的keydown”事件从向上蔓延：

document.addEventListener('keydown', function(e) { 
 
    console.log('hit!'); 
 
    e.preventDefault(); 
 
}); 
 

 
let search = document.getElementById("search"); 
 

 
search.addEventListener('keydown', function(e) { 
 
    console.log("search!"); 
 
    e.stopPropagation(); 
 
});

<form id="search"><input name="query" type="text"><input type="submit" value="search"></form>