Question

环境

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

问题

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

问题

如何防止此行为？

Answer 1

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

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

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

Answer 2

你可以像这样实现一些粗略的事件绑定：

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事件转换为焦点事件。

Angular，如何阻止键盘与父组件的交互

2 个答案: