我想让一个onkeydown
事件只触发一次函数。要再次触发该功能,用户必须松开按键并再次按住/按住。我知道它相当简单,但我是 JS 的新手。另外我更喜欢避免使用 jQuery 或其他库。还有一件事,这应该适用于 ie 和 firefox。
Javascript onkeydown 事件只触发一次?
IT技术
javascript
dom-events
2021-03-15 10:06:46
6个回答
你可以设置一个标志:
var fired = false;
element.onkeydown = function() {
if(!fired) {
fired = true;
// do something
}
};
element.onkeyup = function() {
fired = false;
};
或者取消绑定并重新绑定事件处理程序(可能更好):
function keyHandler() {
this.onkeydown = null;
// do something
}
element.onkeydown = keyHandler;
element.onkeyup = function() {
this.onkeydown = keyHandler;
};
您可能还想使用addEventListener
和attachEvent
绑定事件处理程序。有关更多信息,请查看quirksmode.org - 高级事件注册模型。
我很惊讶没有提到它,还有event.repeat
:
document.addEventListener('keydown', (e) => {
if (!e.repeat)
console.log(e.key);
});
每次按键只会触发一次,因为按住键后event.repeat
会转动true
。
https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/key#keyboardevent_sequence
您可以使用“一次”参数
https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener
例如:
element.addEventListener('keydown', function(event) {
doSomething()
}, {once: true});
它会在调用后立即将其删除。
或者,removeEventListener
如果它是命名函数,您可以使用
干得好:
test.onkeydown = function() {
if ( this.className === 'hold' ) { return false; }
this.className = 'hold';
// call your function here
};
test.onkeyup = function() {
this.className = '';
};
这是一种使用addEventListener
和的方法removeEventListener
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();
jsfiddle上的代码示例。
请注意,对于 IE,您需要使用attachEvent
,detachEvent
。
其它你可能感兴趣的问题