Javascript onkeydown 事件只触发一次?

IT技术 javascript dom-events
2021-03-15 10:06:46

我想让一个onkeydown事件只触发一次函数。要再次触发该功能,用户必须松开按键并再次按住/按住。我知道它相当简单,但我是 JS 的新手。另外我更喜欢避免使用 jQuery 或其他库。还有一件事,这应该适用于 ie 和 firefox。

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;
};

有关“传统”事件处理的更多信息。

您可能还想使用addEventListenerattachEvent绑定事件处理程序。有关更多信息,请查看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 = '';
};

现场演示: http : //jsfiddle.net/simevidas/xAReL/2/

这是一种使用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

您应该注意这仅适用于 Webkit 和 Firefox。IE 使用attachEvent.
2021-04-20 10:06:46
心烦意乱,忘记提了。感谢您的提醒。
2021-05-16 10:06:46