Question

我制作了一段代码，使用向上和向下箭头在6个项目前面垂直移动元素。当按下enter时，我将加载一组带有该项目的图像。代码工作正常，但在输入命中后，这段代码需要停止，所以我可以用箭头键做其他事情并输入。现在它只是在输入被击中后继续前进。我尝试使用var检查，但是我似乎无法从交换机内部更改变量。有人知道如何使这项工作？

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

Answer 1

现在您可以在once对象中传递options布尔值，如下所示：document.body.addEventListener('click', _ => console.log('once'), {once: true});

来源： https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener

目前

浏览器兼容性：每晚Chrome 55，Firefox 50，Safari（WebKit）。

Answer 2

如果要停止所有关键事件，只需删除事件监听器。

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

Answer 3

有趣的是，deattach事件监听器的方法完全按照预期调用： 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);
}

不使用jquery只执行一次事件侦听器函数

3 个答案: