Angular 5如何在移动端（或特定条件下）禁用CDK焦点状态？

这个焦点残留的问题在Angular Material + 移动端的场景里确实挺常见的——本质是CDK为了 accessibility（无障碍访问）保留了焦点状态，但触摸操作下用户其实不需要这个视觉反馈。给你几个不同层级的解决方案，你可以根据需求选择：

方法1：全局CSS屏蔽移动端焦点样式（最简单） #

通过媒体查询精准针对触摸设备，移除所有元素的焦点视觉效果，不会影响桌面端的键盘导航体验：

/* 针对触摸设备（手机/平板）移除焦点样式 */
@media (hover: none) and (pointer: coarse) {
  *:focus {
    outline: none !important;
    /* 如果你的项目用了自定义焦点阴影，也一起去掉 */
    box-shadow: none !important;
  }
}

hover: none 和 pointer: coarse 是标准的CSS媒体查询条件，专门匹配没有 hover 能力、使用粗指针（触摸）的设备，能精准定位移动端场景。

方法2：用CDK FocusMonitor手动管理特定元素焦点 #

如果不想全局修改，只想针对侧边栏按钮、模态框触发按钮这类特定元素处理，可以用CDK自带的FocusMonitor服务主动清除焦点：

首先在组件中注入服务：

import { Component, ElementRef, OnDestroy, AfterViewInit } from '@angular/core';
import { FocusMonitor } from '@angular/cdk/a11y';

@Component({
  selector: 'app-your-component',
  templateUrl: './your-component.component.html'
})
export class YourComponent implements AfterViewInit, OnDestroy {
  constructor(private focusMonitor: FocusMonitor, private el: ElementRef) {}

  ngAfterViewInit() {
    // 选中当前组件内所有需要处理的可聚焦元素
    const targetElements = this.el.nativeElement.querySelectorAll(
      'button, mat-sidenav-toggle, [tabindex]:not([tabindex="-1"])'
    );

    targetElements.forEach(element => {
      // 监听触摸事件，触发后停止焦点监控并失焦
      const handleTouch = () => {
        this.focusMonitor.stopMonitoring(element);
        element.blur();
      };
      element.addEventListener('touchstart', handleTouch);
      // 把回调存起来方便销毁时移除
      (element as any)._touchHandler = handleTouch;
    });
  }

  ngOnDestroy() {
    // 清理监听，避免内存泄漏
    const targetElements = this.el.nativeElement.querySelectorAll(
      'button, mat-sidenav-toggle, [tabindex]:not([tabindex="-1"])'
    );
    targetElements.forEach(element => {
      element.removeEventListener('touchstart', (element as any)._touchHandler);
      delete (element as any)._touchHandler;
    });
  }
}

这个方法的好处是精准控制，只处理你指定的元素，同时保留桌面端的无障碍焦点体验。

方法3：自定义指令统一处理所有需要的元素 #

如果多个组件都有这个问题，写个自定义指令可以避免重复代码，全局复用：

首先创建指令文件：

import { Directive, ElementRef, HostListener } from '@angular/core';
import { FocusMonitor } from '@angular/cdk/a11y';

@Directive({
  selector: '[appTouchBlur]'
})
export class TouchBlurDirective {
  constructor(private el: ElementRef, private focusMonitor: FocusMonitor) {}

  // 监听触摸开始事件
  @HostListener('touchstart')
  onTouchStart() {
    // 停止CDK对该元素的焦点监控
    this.focusMonitor.stopMonitoring(this.el.nativeElement);
    // 手动失焦
    this.el.nativeElement.blur();
  }
}

然后在你的NgModule中声明这个指令，之后直接在需要处理的元素上添加指令属性即可：

<!-- 侧边栏触发按钮 -->
<mat-sidenav-toggle appTouchBlur>菜单</mat-sidenav-toggle>

<!-- 模态框触发按钮 -->
<button mat-raised-button appTouchBlur (click)="openModal()">打开模态框</button>

这种方式最灵活，想给哪个元素加就加哪个，代码复用性最高。

内容的提问来源于stack exchange，提问作者Ron