Angular 16及以上版本禁用mat-menu悬停打开子菜单的方法

要禁用Mat-Menu子菜单的鼠标悬停打开行为，仅保留点击触发，你之前使用preventDefault()的方式无效——因为Angular Material的菜单触发逻辑是内部封装的，无法通过DOM事件直接阻止。正确的做法是利用MatMenuTrigger提供的disableHover输入属性：

步骤1：修改带子菜单的按钮 #

给所有包含[matMenuTriggerFor]的mat-menu-item添加[disableHover]="true"属性，直接禁用悬停打开子菜单的功能：

<button mat-button [matMenuTriggerFor]="animals">Animal index</button>

<mat-menu #animals="matMenu">
  <!-- 给带子菜单的按钮添加disableHover -->
  <button mat-menu-item [matMenuTriggerFor]="vertebrates" [disableHover]="true">
    Vertebrates
  </button>
  <button mat-menu-item [matMenuTriggerFor]="invertebrates" [disableHover]="true">
    Invertebrates
  </button>
</mat-menu>

<mat-menu #vertebrates="matMenu">
  <!-- 二级子菜单同样添加 -->
  <button mat-menu-item [matMenuTriggerFor]="fish" [disableHover]="true">Fishes</button>
  <button mat-menu-item [matMenuTriggerFor]="amphibians" [disableHover]="true">Amphibians</button>
  <button mat-menu-item [matMenuTriggerFor]="reptiles" [disableHover]="true">Reptiles</button>
  <button mat-menu-item>Birds</button>
  <button mat-menu-item>Mammals</button>
</mat-menu>

<!-- 其余菜单代码保持不变 -->
<mat-menu #invertebrates="matMenu">
  <button mat-menu-item>Insects</button>
  <button mat-menu-item>Molluscs</button>
  <button mat-menu-item>Crustaceans</button>
  <button mat-menu-item>Corals</button>
  <button mat-menu-item>Arachnids</button>
  <button mat-menu-item>Velvet worms</button>
  <button mat-menu-item>Horseshoe crabs</button>
</mat-menu>

<mat-menu #fish="matMenu">
  <button mat-menu-item>Baikal oilfish</button>
  <button mat-menu-item>Bala shark</button>
  <button mat-menu-item>Ballan wrasse</button>
  <button mat-menu-item>Bamboo shark</button>
  <button mat-menu-item>Banded killifish</button>
</mat-menu>

<mat-menu #amphibians="matMenu">
  <button mat-menu-item>Sonoran desert toad</button>
  <button mat-menu-item>Western toad</button>
  <button mat-menu-item>Arroyo toad</button>
  <button mat-menu-item>Yosemite toad</button>
</mat-menu>

<mat-menu #reptiles="matMenu">
  <button mat-menu-item>Banded Day Gecko</button>
  <button mat-menu-item>Banded Gila Monster</button>
  <button mat-menu-item>Black Tree Monitor</button>
  <button mat-menu-item>Blue Spiny Lizard</button>
  <button mat-menu-item disabled>Velociraptor</button>
</mat-menu>

原理说明 #

disableHover是Angular Material的MatMenuTrigger指令提供的输入属性，设置为true后，会完全禁用菜单触发器的悬停打开逻辑，仅保留点击（以及键盘导航）的触发方式，这是官方推荐的解决方案，比手动阻止DOM事件更可靠。

兼容说明 #

该属性从Angular Material 12.0.0版本开始提供，如果你使用的是更早的版本，可以通过以下替代方案实现：

替代方案（适用于Angular Material <12） #

1. 移除[matMenuTriggerFor]绑定，改为手动通过点击事件控制菜单的打开/关闭
2. 使用ViewChild获取目标菜单的MatMenuTrigger实例，在点击事件中调用toggleMenu()方法

示例代码：

<!-- 组件模板 -->
<button mat-menu-item (click)="toggleMenu(vertebratesTrigger)">
  Vertebrates
</button>
<mat-menu #vertebrates="matMenu"></mat-menu>
<mat-menu-trigger #vertebratesTrigger="matMenuTrigger" [menu]="vertebrates"></mat-menu-trigger>

// 组件类
import { MatMenuTrigger } from '@angular/material/menu';
import { ViewChild } from '@angular/core';

@ViewChild('vertebratesTrigger') vertebratesTrigger!: MatMenuTrigger;

toggleMenu(trigger: MatMenuTrigger) {
  trigger.toggleMenu();
}

这样也能实现仅点击打开子菜单的效果，同时避免悬停触发。

内容的提问来源于stack exchange，提问作者Mohammed Housseyn Taleb