时间戳

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

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

问题描述

我有一个父包装类和子角度材质菜单按钮。当我将鼠标悬停在父类之外时，我需要隐藏整个包装器。但是当我单击父包装类内部的按钮（打开 mat-menu）时，整个父级关闭。

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

我试过添加

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

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

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

这是我复制问题的 stackblitz 链接。单击菜单按钮时，它应该打开菜单而不是关闭整个父 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>

标签： angularmouseovermouseoutonhover

解决方案

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

这是更新的链接 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>

推荐阅读