9

环境

我的 Angular 应用程序上有一个很大的组件树，有多个路由出口来显示每个级别的特定组件。最深层次是管理某些信息的模式。

问题

如果您可以看到它（父组件），我可以阻止通过鼠标从子组件到父组件事件的交互，但是当我使用键盘时，我可以导航到父组件并在所有父组件中选择选项零件

问题

如何防止这种行为？

4

2 回答 2

13

Angular CDK 提供了一个名为 cdkTrapFocus 的指令，它可以防止焦点移动到 dom 节点及其子节点之外。他们在 MatDialog 中使用它，效果很好。

如果您不想切换到使用 MatDialog 或者您需要在对话框以外的其他布局中使用它，您可能需要考虑单独使用 cdkTrapFocus：https ://github.com/angular/material2/blob/3aceb7361cc34ad987f7b1ca39339d3203248341 /src/cdk/a11y/focus-trap/focus-trap.ts#L340

它应该像导入和声明指令一样简单，然后<div cdkTrapFocus></div>

于 2018-03-15T16:48:24.067 回答
3

好吧，您可以像这样实现一些粗略的事件绑定：

document.onkeydown = checkKey;
function checkKey(e) {
    e = e || window.event;

    // tab, up, down, left, right
    if (e.keyCode == '9' || e.keyCode == '38' || e.keyCode == '40' || e.keyCode == '37' || e.keyCode == '39') {
        console.log("prevent");
        e.stopImmediatePropagation();
        e.preventDefault();
    }
}

这将完全阻止使用页面上的箭头键以及 tab 键（在目标之间切换。）

关于可访问性的说明

@Ricardo 的其中一条评论指出，这是一种非常糟糕的可访问性方法。我认为重要的是要记住，许多有可访问性问题的人会使用像Jaws这样的程序来浏览网页。这些程序在 Web 应用程序之外捕获击键，然后将这些操作传播到浏览器。阻止keydown事件不会阻止这一点 - JAWS 专门将用户的 keydown 事件转换为焦点事件。

于 2018-03-22T04:28:22.087 回答