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"

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

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

修改

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

解决方案是在$ destroy事件上手动删除处理程序（可以在Dave在他的答案中给出的链接中找到keyboardManager，你也可以使用$ 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（）？我认为这解决了这个问题。

keydown在keyup之前多次触发

1 个答案: