javascript - keydown 在 keyup 之前触发多次

Question

我有一个使用快捷方式的 angular.js webapp。当我按下任意键时，我得到 N keydown 事件，然后是 N keyup 事件，其中 N 介于 2 和 5 之间，而我希望它只触发一次。这是我用来捕获键盘事件的代码:

// Controller.js
var allowed = true;
$document.bind('keyup', function (event) {
  console.log('keyup');
  allowed = true;
});
$document.bind('keydown', function (event) {
  if (allowed) {
    allowed = false;
    var key = event.which || event.keyCode || event.charCode;
    console.log('key down: ' + key);
    if (key === 32) { // Space bar
      $scope.showAll();
      event.stopPropagation();
    }
    else if ($scope.visible.answerButtons === true) {
      if (key === 37) { // Left arrow, wrong answer
        $scope.session.addAnswer(false);
        event.stopPropagation();
      }
      else if (key === 39) { // Right arrow, right answer
        $scope.session.addAnswer(true);
        event.stopPropagation();
      }
    }

    if (!$scope.$$phase) { $scope.$apply(); }
  }
});

allow 变量的使用在这里不起作用，因为所有 keydown 事件都在 keyup 之前触发。当我按任意键时的结果是:

"key down: 32" 
"keyup" 
"key down: 39" // I'm pressing the right arrow only once, and release it immediately
"key down: 39" // but it fires 3 times
"key down: 39"
"keyup"
"keyup"
"keyup"

请注意，我第一次显示页面时一切正常。当我再次显示它时出现问题(重新加载模板和 Controller ，而不是使用 F5 刷新整个应用程序)。

知道为什么我在第一次显示后会收到所有这些事件吗？

编辑:

好的，我明白了，它在第一次显示后触发多个事件的原因很简单，因为 Angular 不会在范围破坏时删除事件监听器。因此，保留了旧的监听器，因此当我重新加载页面时，我会为同一事件获得多个处理程序，它们执行相同的操作。所以当我显示页面 N 次时，有 N 个 keydown 事件处理程序。

解决方案是手动删除 $destroy 事件的处理程序(keyboardManager 可以在 Dave 在他的回答中给出的链接中找到，您也可以使用 $document.unbind):

keyboardManager.bind('space', function () {
  console.log('press space');
});
keyboardManager.bind('right', function () {
  console.log('press right');;
});
keyboardManager.bind('left', function () {
  console.log('press left');
});

$scope.$on('$destroy', function () {
  keyboardManager.unbind('space');
  keyboardManager.unbind('right');
  keyboardManager.unbind('left');
});

Answer 1

你试过 event.stopImmediatePropagation() 了吗？我认为它解决了这个问题。