Javascript onkeydown事件只触发一次？

我想让一个

onkeydown

事件只触发一次函数。要再次启动该功能，用户必须释放该键并再次按住。 我知道这很简单，但我是JS的新手。此外，我更喜欢避免使用jQuery或其他LIB。 还有一件事，这应该适用于ie和firefox

JQuery将帮助您

它所做的是将eventHandler绑定到事件，当事件发生时，它运行eventHandler并解除绑定，以便在下一个事件中不会触发它。

您可以设置一个标志：

var fired = false;

element.onkeydown = function() {
    if(!fired) {
        fired = true;
        // do something
    }
};

element.onkeyup = function() {
    fired = false;
};

或者取消绑定并重新绑定事件处理程序（可能更好）：

您可能还希望使用

addEventListener

和

attachEvent

绑定事件处理程序。有关这方面的更多信息，请查看。

给您：

test.onkeydown = function() {
    if ( this.className === 'hold' ) { return false; }
    this.className = 'hold';

    // call your function here
};

test.onkeyup = function() {
    this.className = '';
};

---

现场演示：

以下是一种使用和

var textBox=document.getElementById（“textBox”）；
函数oneKeyDown（）{
$（“body”）.append（“KeyDown”）；//仅显示按键
removeEventListener（'keydown'，oneKeyDown，false）；
}
函数bindKeyDown（）{
textBox.addEventListener（'keydown'，oneKeyDown，false）；
}
textBox.addEventListener（'keyup'，bindKeyDown，false）
bindKeyDown（）；

对示例进行编码。

---

对于IE，您需要使用一个注释。

如其他答案中所述，没有“onkeyfirstdown”或类似事件可供收听

最好的解决方案是跟踪js对象中哪些关键点已关闭：

var keysdown = {};

element.addEventListener('keydown', function(evt) {
  if(!(evt.key in keysdown)) {
    keysdown[evt.key] = true;
    // key first pressed
  }
});

element.addEventListener('keyup', function(evt) {
  delete keysdown[evt.key];
});

这样，如果按下多个键，则不会跳过“keyfirstpressed”事件

（此处发布的许多其他解决方案只有在没有其他按键按下时才会启动）。

有一个“once”参数可供使用

例如：

一旦调用它，它就会将其删除

---

或者，您可以使用

removeEventListener

如果它是一个命名函数

这里是我的解决方案，它只会在第一次按下目标键时运行您传递的函数（例如

窗口

或某些

输入

字段）。如果用户想再次触发某个键，则必须释放该键并再次按下

---

香草JS

const onKeyPress=（func，target=window）=>{
//持续“存储”以跟踪正在按下的键
让按下={}；
//每当在目标元素上触发keydown事件时
const onKeyDown=（事件）=>{
//如果尚未按下该键，请运行func
如果（！按下[event.which]）
func（活动）；
//将密钥添加到存储
pressed={…pressed[event.which]：true}；
};
//每当在window元素上激发keyup事件时
const onKeyUp=（事件）=>{
const{[event.which]：id，…rest}=pressed；
//从存储中删除密钥
按下=静止；
};
//添加侦听器
target.addEventListener（'keydown'，onKeyDown）；
window.addEventListener（'keyup'，onKeyUp）；
//返回可以调用以删除侦听器的函数
return（）=>{
target.removeEventListener（'keydown'，onKeyDown）；
window.removeEventListener（'keyup'，onKeyUp）；
};
};

然后使用它：

const removeListener=onKeyPress（（事件）=>console.log（event.which+'key pressed'））
removeListener（）；//以后要删除侦听器时

---

反应和反应挂钩

从'react'导入{useState}；
从“react”导入{useffect}；
从“react”导入{useCallback}；
导出常量useKeyPress=（函数，目标=窗口）=>{
//持续“存储”以跟踪正在按下的键
const[pressed，setPressed]=useState（{}）；
//每当在目标元素上触发keydown事件时
const onKeyDown=useCallback(
（事件）=>{
//如果尚未按下该键，请运行func
如果（！按下[event.which]）
func（活动）；
//将密钥添加到存储
setPressed（{…pressed，[event.which]：true}）；
},
[按func键]
);
//每当在window元素上激发keyup事件时
const onKeyUp=useCallback（（事件）=>{
//从存储中删除密钥
const{[event.which]：id，…rest}=pressed；
设置按下（休息）；
}，[按]；
useffect（（）=>{
//组件装载/更改时添加侦听器
target.addEventListener（'keydown'，onKeyDown）；
window.addEventListener（'keyup'，onKeyUp）；
//组件卸载/更改时清理/删除侦听器
return（）=>{
target.removeEventListener（'keydown'，onKeyDown）；
window.removeEventListener（'keyup'，onKeyUp）；
};
}，[target，onKeyDown，onkeydup]）；
};

然后使用它：

从“where”导入{useKeyPress}；
useKeyPress（（事件）=>console.log（event.which+'key pressed'））

我宁愿避免使用jquery或其他LIB。而

one

本身也没有帮助。您必须重新绑定事件处理程序。您应该注意，这只适用于Webkit和Firefox。IE使用

attachEvent

。分心了，忘了提它。谢谢你的提醒。

var textBox = document.getElementById("textBox");
function oneKeyDown(){
    $("body").append("<h1>KeyDown<h1>"); //just to show the keypress
    textBox.removeEventListener('keydown', oneKeyDown, false);
}
function bindKeyDown(){
  textBox.addEventListener('keydown', oneKeyDown, false);
}
textBox.addEventListener('keyup', bindKeyDown, false)   
bindKeyDown();

var keysdown = {};

element.addEventListener('keydown', function(evt) {
  if(!(evt.key in keysdown)) {
    keysdown[evt.key] = true;
    // key first pressed
  }
});

element.addEventListener('keyup', function(evt) {
  delete keysdown[evt.key];
});

element.addEventListener('keydown', function(event) {  
    doSomething()
}, {once: true});