在没有jquery的情况下只执行一次事件侦听器函数

Execute event listener function only once without jquery

本文关键字：一次 事件 函数 侦听器 执行 jquery 情况下      更新时间：2023-09-26

我编写了一段代码，用上下箭头将一个元素垂直移动到6个项目的前面。当按下回车键时，我会加载一组带有该项目的图像。代码运行良好，但在回车后，这段代码需要停止，所以我可以用箭头键和回车做其他事情。现在它只是在输入被击中后继续运行。正如你所看到的，我尝试了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;
        }
    }
});
}

现在您可以在options对象中传递一个once布尔值，如下所示：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）夜间版。

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

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

有趣的是，取消附加事件侦听器的方法的调用与预期完全一样：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);
}
相关文章：