Question

我创建了一个使用keypress捕获$document.on事件的侦听器，它运行正常。这里的问题是我希望监听器只有在特定模态打开时才会处于活动状态，并且当它关闭时应该取消监听器。问题是即使在模态关闭后，监听器也会监听事件，因为我有即使进入输入框，event.preventDefault()也无法正常工作。

以下是我正在使用的指令：

    return {
        restrict: 'A',
        scope: {
            choice: '=detectKeypair',
        },
        link: function (scope, element, attrs) {
            listener = $document.on('keydown keypress', function (event) {
                event.preventDefault();
                $timeout(function () {
                  //pressed keys are available here
                })
            });

            scope.$on('modal.closing', function () {
                // listener();
                $document.off('keydown keypress',function(){console.log('closed')});
                console.log("Closing modal inside directive");
            })
        }
    }

正如您所看到的，我已将侦听器分配给变量并在modals close事件上调用它。不幸的是，这不起作用，我事件试图通过调用$document.off并传递事件来取消监听器。

即使这样也拒绝工作。救命！！ ..

Answer 1

要取消事件侦听器，必须传递已传递的相同函数来创建侦听器。

        link: function (scope, element, attrs) {
            listener = $document.on('keydown keypress', keyboardListener);

            function keyboardListener(event) {
                event.preventDefault();
                $timeout(function () {
                   //got the keys here
                })
            }

            // On closing the modal , cancel the listener
            scope.$on('modal.closing', function () {
                $document.off('keydown keypress', keyboardListener);
            })
        }

那很有用。

在Angular中取消$ document事件侦听器

1 个答案: