如何修复enter键运行函数两次而只被调用一次的keypress事件

Question

我正在创建一个小费计算器。我在页面上有一个按钮，如果你按下它或者你按下键盘上的enter键，它就会计算出小费。当我按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。

我的生活里有我的密码。我已经测试过了，看看这个生命之外的代码是否影响了什么，但它没有。“Click”事件侦听器工作完美，只执行一次calculateTip函数。在我的这个版本的代码中，如果单击enter，计算提示会将'test'打印到控制台两次。

生活：

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

这是一次，请你看看这个。

<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 2

通过jquery，您可以解决这个问题

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