Как исправить событие нажатия клавиши для клавиши ввода, при которой функция запускается дважды, а вызывается только один раз - PullRequest
Новая
       16

Как исправить событие нажатия клавиши для клавиши ввода, при которой функция запускается дважды, а вызывается только один раз

0 голосов
/ 20 апреля 2019

Я создаю калькулятор чаевых.У меня есть кнопка на странице, которая рассчитывает подсказку, если вы нажимаете ее или если вы нажимаете Enter на клавиатуре.Когда я нажимаю клавишу ввода, запускается функция, которая вычисляет подсказку, но затем она запускается снова, хотя я не вызывал ее снова нигде в своем коде.Странно то, что при втором запуске он входит в переменную, в которой хранится функция, и запускает ее.Я не знаю, почему это входит в переменную, которая не была вызвана.

Я попытался отладить, чтобы увидеть, пропустил ли я шаг и вызвал ли я функцию дважды где-то, но я этого не сделал.

Вот событие нажатия клавиши: 

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

Затем, сразу после этого кода, есть переменная Calculate: 

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

После нажатия клавиши выполняется функция расчета подсказки, затем онапереходит прямо в указанную выше переменную, чтобы снова запустить Calculate.

У меня есть код внутри IIFE.Я уже проверил, чтобы увидеть, влияет ли код за пределами этого IIFE, это не так.Прослушиватель событий «click» работает отлично и выполняет функцию calcTip только один раз.В этой версии моего кода при помощи нажатия клавиши enterTyptTip выводит «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();

Ответы [ 3 ]

0 голосов
/ 20 апреля 2019

Попробуйте добавить в функцию прослушивания событий следующее: 

event.stopImmediatePropagation();
0 голосов
/ 21 апреля 2019

с JQuery вы можете решить это 

$(document).unbind('keypress').bind('keypress', function (e) {
    if (e.keycode === 13 || e.which === 13) {
    calculateTip();
  }
});
0 голосов
/ 20 апреля 2019

Это один раз, пожалуйста, проверьте это. 

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