html - Disable mat-menu hover event opening menu item in Angular 16 or above - Stack Overflow

admin管理员组

文章数量:1313747

I dont know how to disable the hover event opening a submenu in angular mat-menu, I need to open menus only by click not by hovering.

I tried the following but no success.

<button mat-button [matMenuTriggerFor]="animals">Animal index</button>
<!-- #docregion sub-menu -->
<mat-menu
  #animals="matMenu"
  (mouseenter)="$event.preventDefault()"
  (mouseover)="$event.preventDefault()"
>
  <button
    (mouseenter)="$event.preventDefault()"
    (mouseover)="$event.preventDefault()"
    mat-menu-item
    [matMenuTriggerFor]="vertebrates"
  >
    Vertebrates
  </button>
  <button
    (mouseenter)="$event.preventDefault()"
    (mouseover)="$event.preventDefault()"
    mat-menu-item
    [matMenuTriggerFor]="invertebrates"
  >
    Invertebrates
  </button>
</mat-menu>

<mat-menu #vertebrates="matMenu">
  <button mat-menu-item [matMenuTriggerFor]="fish">Fishes</button>
  <button mat-menu-item [matMenuTriggerFor]="amphibians">Amphibians</button>
  <button mat-menu-item [matMenuTriggerFor]="reptiles">Reptiles</button>
  <button mat-menu-item>Birds</button>
  <button mat-menu-item>Mammals</button>
</mat-menu>
<!-- #enddocregion sub-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>

any body knows how to ???

本文标签： htmlDisable matmenu hover event opening menu item in Angular 16 or aboveStack Overflow