在 keyup javascript 上的 addEventListener 一次答案

【问题标题】：addEventListener on keyup javascript once在 keyup javascript 上的 addEventListener 一次
【发布时间】：2017-05-22 08:11:45
【问题描述】：

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

这是我的代码：

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

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

【问题讨论】：

标签： javascript function keydown

【解决方案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);

【讨论】：

绝对是更好的方法。
很好的解决方案。

【解决方案2】：

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

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

【讨论】：

【解决方案3】：

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

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

查看我的question，它与您的情况相似。

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

element.removeEventListener("keydown", myKeyPressed);

【讨论】：

【解决方案4】：

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

【讨论】：

【解决方案5】：

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

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

【讨论】：

【解决方案6】：

您可以添加一个变量来检查您的按键状态。第一次使用时，将其设置为 true。所以你只会触发一次这个函数。

【讨论】：

这应该是一条评论

【解决方案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);

【讨论】：

【解决方案8】：

将 keydown 添加到 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 }
   }
}

【讨论】：