仅使用JavaScript实现事件监听器函数仅执行一次

8
我写了一段代码,可以通过向上和向下箭头将元素在6个项目的前面垂直移动。当按下回车键时,我将加载该项的一组图像。代码运行良好,但是在按下回车键后,这段代码需要停止,以便我可以使用箭头键和回车键进行其他操作。现在它只会在按下回车键后继续执行。我尝试使用变量检查,如您所见,但我似乎无法从switch内部更改变量。有人有想法如何使其工作吗?
var enterPushed = false;

if(!enterPushed){   
        document.addEventListener('keydown', function(event){
    if(event.keyCode == 38){
        console.log("up");
        if(margTop > 122){
            margTop = margTop - 60;
            marginTop();
            i = i - 1;
            bliep.play();
        }
    }
    if(event.keyCode == 40){
        console.log("down");
        if(margTop < 422){
            margTop = margTop + 60;
            marginTop();
            i = i + 1;
            bliep.play();   
        }
    }
    if(event.keyCode == 13){
        switch(i){
            case 1:
                enterPushed = true;
                startup(1);         
            break;
            case 2:
                enterPushed = true;
                startup(2);             
            break;
            case 3:
                enterPushed = true;
                startup(3);         
            break;
            case 4:
                enterPushed = true;
                startup(4);         
            break;
            case 5:
                enterPushed = true;
                startup(5);             
            break;
            case 6:
                enterPushed = true;
                startup(6);         
            break;
        }
    }
});
}

1
你可以放弃使用 switch,改用 if (i >=1 && i <= 6) { enterPushed = true; startup(i); }。不过,switch 可以很好地替代所有的 if(event.keyCode...) 语句。 - user1106925
3个回答

13

1
生活本可以如此简单,可惜它不被IE11支持... https://caniuse.com/#search=once - Patrick Hund
1
正是我所需要的,谢谢!@PatrickHund:如果我必须支持IE11,我会坚持使用jQuery。 - noseratio - open to work

4
如果您想停止所有按键事件,请移除事件侦听器。
var enterPushed = false;

var handleKeyDown = function(){
    if(event.keyCode == 38){
        console.log("up");
    }
    if(event.keyCode == 40){
        console.log("down");
    }
    if(event.keyCode == 13){
      console.log('enter');
      document.removeEventListener('keydown', handleKeyDown);      
    }
};

document.addEventListener('keydown', handleKeyDown);

如果你想停止仅监听回车或特定按键,你可以添加一个标志并检查它以及按键代码。这看起来就像你在这里几乎完成的那样。我完成了逻辑并减少了代码:

if(event.keyCode == 13 && enterPushed){
   enterPushed = true;
   startup(i);  
}

2
这不是 .removeEventListener() 的正确使用方法。你需要提供原始函数。 - user1106925

4
有趣的是,取消事件监听器的方法被称为“removeEventListener(type, listener[, useCapture])”,正如人们所预期的一样。它的使用方法可以在这里找到。
function listenOnce(node, type, listener, useCapture) {
    if (useCapture == null) {
        useCapture = false;
    }

   function wrapper() {
        node.removeEventListener(type, wrapper, useCapture);
        return listener.apply(this, arguments);
    }

    node.addEventListener(type, wrapper, useCapture);
}

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文,
原文链接