addEventListener on keyup javascript once

Question

我想在键盘上按回车键后运行countup();并random();函数。但我想让它只是第一次工作。我的意思是当我第一次按回车键时，它将运行该功能。但是，如果这些函数已经运行并且我再次按回车键，则永远不会影响任何事情。

这是我的代码：

addEventListener("keydown", function(e){
    if (e.keyCode === 13) {
        countup();
        random();
    }
});

有人可以帮助我吗？谢谢。

Answer 1

做这样的事情

// Create a named function as your event handler
var myFunction = function (e) {
  if (e.keyCode === 13) {
    // Do your stuff here
    countup();
    random();
    // Remove event listener so that next time it is not triggered
    removeEventListener("keydown", myFunction);
  }
};
// Bind "keydown" event
addEventListener("keydown", myFunction);

Answer 2

Idea 是用户一个全局变量，在触发事件后设置它。

var is_fired = false;
addEventListener("keydown", function(e){
    if (e.keyCode === 13 && is_fired == false) {
        countup();
        random();
        is_fired = true
    }
});

Answer 3

您可以使点击事件侦听器在触发后仅工作一次。您只需向addEventListener()添加另一个参数，该参数{once:true}，它将按预期工作：

addEventListener("keydown", function(e){
      if (e.keyCode === 13) {
        countup();
        random();
      }
},{once: true});

检查我的问题，它与您的情况相似。

您也可以只使用removeEventListener()方法，但您应该在将匿名函数定义为外部函数(如 myKeyPressed()(之前，然后在内部 if 条件从元素中删除事件侦听器：

element.removeEventListener("keydown", myKeyPressed);

Answer 4

var is_clicked = false;
addEventListener("keydown", function(e){
      if (e.keyCode === 13 && !is_clicked) {
        countup();
        random();
        is_clicked = true;
      }
    });

Answer 5

javascript 中有一个 removeEventListener 函数，但在你在 addEventListener 上调用的函数中实现它是很棘手的。试试这个，它在 jsfiddle 中工作。

addEventListener("keydown", function(e){
    if (e.keyCode === 13) {
        alert("i did it");
        this.removeEventListener('keydown',arguments.callee,false);
    }
});

Answer 6

您可以添加一个变量来检查按键的状态。首次使用它时，请将其设置为 true。因此，您将只触发一次此功能。

Answer 7

 var n = document.getElementById("txtInput"),
          r = document.getElementById("result"),
          loadFlag = true;
      n.addEventListener("keyup", function(e) {
       if (e.keyCode === 13 && loadFlag ) {
                countup(r);   
        random(r);
        loadFlag = false;
        }
      }, false);

Answer 8

向 HTML 代码中的元素添加键。

element.addEventListener("keydown", event => {
//check if event is cancelable because not all event can be cancelled
if(event.cancelable)
   { 
       //this prevent element from executing the default event when user click
       event.preventDefault()
       if(event.keycode === 13){ //write your statement here }
   }
}

了解更多 https://www.w3schools.com/jsref/event_preventdefault.asp