如何防止关闭具有属性 - 鼠标悬停 [隐藏] 的父级内部的垫子菜单？

Question

我有一个父包装 class 和一个子 angular material 菜单按钮。当我悬停在父 class 之外时，我需要隐藏整个包装器。但是当我单击父包装器 class 内的按钮（打开垫子菜单）时，整个父级关闭。

我应该能够在父包装内执行任何点击操作，并且只有当我悬停在父包装外时它才会关闭。我该如何实施？

我试过添加

event.stopImmediatePropagation();
event.preventDefault();
event.stopPropagation();

点击子垫菜单的按钮，但父包装器仍在关闭

https://stackblitz.com/edit/angular-ekjzq5

这是我重现我的问题的 stackblitz link。单击菜单按钮时，它应该打开菜单而不是关闭整个父级 div。

我应该可以点击按钮菜单并且应该可以点击菜单中的项目

<button mat-button (mouseover)="showBase=true">Hover on me </button>
<div *ngIf="showBase" class="div-style">
   <span  (mouseleave)="showBase=false">
      <button mat-icon-button [matMenuTriggerFor]="menu" 
      #menuTrigger="matMenuTrigger" >
      <mat-icon>menu</mat-icon>
      </button>
      <mat-menu #menu="matMenu" [overlapTrigger]="false">
      <span>
         <button mat-menu-item>
            <mat-icon>home</mat-icon>
            <span>Home</span>
         </button>
         <button mat-menu-item>
            <mat-icon>people_outline</mat-icon>
            <span>Connecting</span>
         </button>
      </span>
      </mat-menu>
   </span>
</div>

Answer 1

所以，它关闭的原因是因为当您单击按钮打开菜单时 Angular 添加了一些标记（一个是整个屏幕的覆盖），现在位于您的鼠标下方 - 所以您实际上触发了 mouseleave 或 mouseout。因此，您将不得不进行一些更改。但你有选择！

我不确定您使用的是哪个版本，但可以将 hasBackdrop 设置为 false 并完全避免此问题。
您可以通过点击而不是鼠标移动来触发 parent 菜单 open/close。这是最简单的修复方法，但显然可能不是您想要的效果。
使用第二个变量来跟踪菜单是否打开，如果菜单也打开，则保持 parent 打开。这样做的缺点是，当菜单关闭时，您的 parent 也会关闭。 Stackblitz 的更改如下所示：

app.component.ts

import { Component } from '@angular/core';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent  {  
showBase:boolean = false;
menuUp:boolean= false;
}

app.component.html

<mat-toolbar color="primary">
    <span class="fill-remaining-space">
    <button mat-button (mouseover)="showBase=true">Hover on me </button>
    <div *ngIf="showBase||menuUp" class="div-style" (mouseleave)="showBase=false">
     <span> 
       <button mat-icon-button 
       [matMenuTriggerFor]="menu" 
       #menuTrigger="matMenuTrigger"
       (menuOpened)="menuUp=true"
       (menuClosed)="menuUp=false">
      <mat-icon>menu</mat-icon>
    </button>
    <mat-menu #menu="matMenu" [overlapTrigger]="false">
    <span >
      <button mat-menu-item>
        <mat-icon>home</mat-icon>
        <span>Home</span>
      </button>
      <button mat-menu-item>
        <mat-icon>people_outline</mat-icon>
        <span>Connecting</span>
      </button>
      <button mat-menu-item>
        <mat-icon>videocam</mat-icon>
        <span>Let's talk</span>
      </button>
      <button mat-menu-item>
        <mat-icon>exit_to_app</mat-icon>
        <span>Logout</span>
      </button>
    </span>
</mat-menu></span>
</div>

 </span> 
  <span class="fill-remaining-space">Application Title</span>
</mat-toolbar>

您可以通过考虑何时设置 menuUp=false（而不是仅在菜单关闭时）并添加对您的情况有意义的逻辑来解决此问题。

Answer 2

我修改了上面的回复。即使内部菜单关闭，我也不希望基本容器关闭。所以我在下面添加了一个覆盖容器，每当它进入覆盖容器时，我就会关闭基础容器。

这是更新后的 link https://stackblitz.com/edit/angular-yx376k

<mat-toolbar color="primary">
    <span class="fill-remaining-space">
    <button mat-button (mouseover)="showBase=true">Hover on me </button>
    <div class="overlay" style="" (mouseover)="showBase=false;menuUp=false"></div>
    <div *ngIf="showBase||menuUp" class="div-style" (mouseleave)="showBase=false">
     <span> 
       <button mat-icon-button 
       [matMenuTriggerFor]="menu" 
       #menuTrigger="matMenuTrigger"
       (menuOpened)="menuUp=true"
      >
      <mat-icon>menu</mat-icon>
    </button>
    <mat-menu #menu="matMenu" [overlapTrigger]="false">
    <span >
      <button mat-menu-item>
        <mat-icon>home</mat-icon>
        <span>Home</span>
      </button>
      <button mat-menu-item>
        <mat-icon>people_outline</mat-icon>
        <span>Connecting</span>
      </button>
      <button mat-menu-item>
        <mat-icon>videocam</mat-icon>
        <span>Let's talk</span>
      </button>
      <button mat-menu-item>
        <mat-icon>exit_to_app</mat-icon>
        <span>Logout</span>
      </button>
    </span>
</mat-menu></span>
</div>

 </span> 
  <span class="fill-remaining-space">Application Title</span>
</mat-toolbar>

如何防止关闭具有属性 - 鼠标悬停 [隐藏] 的父级内部的垫子菜单？

How to prevent closing of a mat menu which is inside a parent which has property - mouseover [hidden]?

mouseover

mouseout

onhover

angular

如何防止关闭具有 属性 - 鼠标悬停 [隐藏] 的父级内部的垫子菜单？

How to prevent closing of a mat menu which is inside a parent which has property - mouseover [hidden]?

mouseover

mouseout

onhover

angular

如何防止关闭具有属性 - 鼠标悬停 [隐藏] 的父级内部的垫子菜单？