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

Question

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

我尝试调试以查看是否遗漏了一个步骤以及是否在某处调用了该函数两次，但我没有。

这是按键事件：

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 函数。在我的这个版本的代码中，如果单击输入，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

给你一次机会，请你检查一下。

<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

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

event.stopImmediatePropagation();

Answer 3

用jquery就可以解决

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

Answer 4

只需在回调中添加 event.preventDefault();，它对我有帮助。

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

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

How to fix keypress event for enter key that is running a function twice while only being called once

javascript

function

keypress

iife

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

How to fix keypress event for enter key that is running a function twice while only being called once

javascript

function

keypress

iife

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