我有一个使用快捷方式的 angular.js Web 应用程序。当我按下任意键时,我会收到 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');
});
最佳答案
您尝试过 event.stopImmediatePropagation() 吗?我认为它解决了这个问题。
关于javascript - keydown 在 keyup 之前触发多次,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/23386127/