单击后按钮保持焦点

Question

我有一个按钮，单击该按钮会导航到另一条路线。相关代码为：

<button (click)="goBack()" mat-button
      aria-label="Previous Screen" role="navigation">
      <mat-icon>keyboard_arrow_left</mat-icon>
</button>

点击处理程序：

  goBack() {
    this.location.back();
  }

当我点击按钮时，路线改变了，但按钮获得了焦点。那是我做错了什么吗？

Answer 1

最简单的解决方案是：

button:focus {
  outline: none;
}

但是，从按钮中删除轮廓绝对不利于可访问性。有些用户无法控制鼠标，需要能够使用键盘在页面中切换。删除轮廓会使这变得非常困难。最好防止按钮在点击时获得焦点。

在我看来，在 onMouseDown 中调用 e.preventDefault() 是一种更简洁的解决方案。这当然是一个可访问性友好的解决方案（但是该解决方案可能与您的项目不兼容）。

可以找到多个干净且易于访问的解决方案here。

干杯！

Answer 2

您想查看 HTMLElement.blur() 功能。我对 Angular 不太熟悉，但您需要有权访问该事件及其目标才能执行此操作。

像这样的东西应该可以工作：

<button (click)="goBack($event)" mat-button
      aria-label="Previous Screen" role="navigation">
      <mat-icon>keyboard_arrow_left</mat-icon>
</button>

对于 JS：

goBack(event) {
    event.target.blur()
    this.location.back();
  }

单击后按钮保持焦点

Button retains focused after click

html

javascript

angular

angular-router