Question

我正在尝试创建一个指令，允许我将键盘操作绑定到页面中的元素。这是指令

angular.module('app').directive('keyboardAction', keyboardAction);
function keyboardAction() {
    return {
        restrict: 'A',
        link: function (scope, element, attrs) {
            document.onkeydown = function (e) {
                if (e.keyCode == attrs.keyboardAction) {
                    element.click();
                }
            };
        }
    };
}

我在DOM中有两个要运用此指令的元素。一个是左箭头链接，另一个是右边：

<a href="left-href..." keyboard-action="37" class="arrow left">Left</a>
<a href="right-href..." keyboard-action="39" class="arrow right">Right</a>

问题：只有DOM中的最后一个指令引用（右箭头中的那个）。看来DOM中的最后一个指令引用会覆盖以前的document.onkeydown处理程序。有什么建议吗？

Answer 1

使用.addEventListener()。直接将事件分配给一个属性是旧的：

document.addEventListener('keydown', function (e) {
    if (e.keyCode == attrs.keyboardAction) {
        element.click();
    }
});

绑定到文档事件的多个指令引用

1 个答案: