提问者:小点点

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


我正在创建一个小费计算器。我在页面上有一个按钮,如果你按下它或者你按下键盘上的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();

共2个答案

匿名用户

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

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

匿名用户

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

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