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

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

我试着调试，看看是否遗漏了一个步骤，是否在某个地方调用了两次该函数，但没有

以下是按键事件：

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

然后紧跟在该代码之后的是CalculateIP变量：

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

按下该键后，执行CalculateIP，然后直接进入上述变量再次运行CalculateIP

我的生活中有我的密码。我已经测试过这个生命之外的代码是否影响了任何东西，它没有。“单击”事件侦听器工作正常，只执行CalculateIP函数一次。 在我的代码的这个版本中，如果单击enter，CalculateIP将在控制台上打印两次“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();

---

只给你一次，请你检查一下

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

document.addEventListener（'keypress'，函数（事件）{
if（event.keycode==13 | | event.which==13）{
calculateIP（）；
}
});
var calculateIP=函数（）{
console.log（“点击输入”）；
}

尝试将以下内容放入事件侦听器函数：

event.stopImmediatePropagation();

---

使用jquery可以解决这个问题

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

---

只需添加

event.preventDefault（）在回调中，它帮助了我

document.addEventListener（'keypress'，函数（事件）{
if（event.keycode==13 | | event.which==13）{
event.preventDefault（）；
calculateIP（）；
}
}
if（keycode==13）在eventListener中放入一条打印语句在calculateTip内部。然后您将能够看到两个函数中的哪一个被调用了两次。@Radagast我在calculateTip内部添加了一个print语句，它被打印了两次。我不知道为什么，因为我只调用了一次calculateTip。对我来说，它在IE、Chrome、Firefox中工作，所以我需要更多的信息来帮助重现这个问题。是不是他只对你拥有的东西进行编码？哪个浏览器在生成那个东西，哪个版本？没有其他代码对这段代码有影响吗？你有没有试过用另一个键来查看它是否只在enter键上发生？你是不是通过编程的方式在某个地方触发了按键？结果证明我不需要按键功能，因为如果我按了enter键，calculateTip将以任何方式运行，但只有当我在文档上按相应的按钮时，calculateTip才起作用。我认为该函数执行了两次，因为我添加了keypress函数。我不确定为什么enter键在没有任何代码的情况下起作用。