如何在只调用一次的情况下为正在运行函数的输入键修复按键事件

Question

我正在创建一个小费计算器。我在页面上有一个按钮，如果您按下它或按键盘上的Enter键，它会计算提示。当我按下回车键时，计算提示的功能会运行但是它会再次运行，即使我没有在我的代码中的任何地方再次调用它。奇怪的是，它是第二次运行，它进入存储函数的变量并运行函数。我不知道它为什么会进入一个未调用的变量。

我尝试调试，看看我是否错过了一个步骤，如果我在某处调用了两次函数，但我没有。

这是按键事件：

document.addEventListener('keypress', function(event) {
      if (event.keycode === 13 || event.which === 13) {
        calculateTip();
      }

然后在该代码之后是calculateTip变量：

var calculateTip = function() {
   some code that does calculations
}

按下键后，执行calculateTip，然后直接进入上面的变量再次运行calculateTip。

我的代码在IIFE中。我已经测试过看看这个IIFE之外的代码是否会影响任何东西，但事实并非如此。 'click'事件侦听器工作正常，只执行一次calculateTip函数。在我的代码版本中，如果单击enter，calculateTip将向控制台打印“test”两次。

IIFE：

var controller = (function(calcCtrl, UICtrl) {

  var setupEventListeners = function() {

    var DOM = UICtrl.getDOMstrings();

    document.querySelector(DOM.button).addEventListener('click', calculateTip);

    document.addEventListener('keypress', function(event) {
      if (event.keycode === 13 || event.which === 13) {
        calculateTip();
      }
    });
  };

var calculateTip = function() {
 console.log('test')
};

return {
    init: function() {
      setupEventListeners();
    }
  }

})(calculateController, UIController);

controller.init();

Answer 1

用jquery你可以解决它

$(document).unbind('keypress').bind('keypress', function (e) {
    if (e.keycode === 13 || e.which === 13) {
    calculateTip();
  }
});

Answer 2

请你花一点时间来检查一下。

<script type="text/javascript">
    document.addEventListener('keypress', function(event) {
          if (event.keycode === 13 || event.which === 13) {
            calculateTip();
          }
     });
    var calculateTip = function() {
       console.log("enter clicked");
    }
</script>

Answer 3

尝试将以下内容添加到事件侦听器函数中：

event.stopImmediatePropagation();