angular - 将鼠标悬停在垫标签上时不会触发 mouseenter 和 mouseleave

Question

悬停在 mat-filed-set 标签 (mat-label) 上时无法捕获 (mouseenter) 和 (mouseleave) 事件。

当用户将鼠标悬停在某些表单字段标签上时，我需要在屏幕底部显示一些上下文帮助信息。

 <mat-form-field floatLabel="always">
         <!-- this does not work -->
         <mat-label class="mat-h1"  
            (mouseenter)="mouseHovering($event)" 
            (mouseleave)="mouseLeave()">Background information
          </mat-label>

         <!-- this works -->
         <mat-icon class="md-18" mat-button 
            (mouseenter)="mouseHovering($event") 
            (mouseleave)="mouseLeave()" color="primary">info
         </mat-icon>
          :
          :
          some control
          :
 </mat-form-field>

// These methods are never triggered (when hovering the mat-label)
  mouseHovering($event) {
    :
    //(logic to display a bottom sheet)
  }

  mouseLeave() {
    :
    //(logic to display a bottom sheet)
  }

能够以与不使用 mat-label 相同的方式捕获事件

Answer 1

原因是因为 Angular 在 mat-label 组件上有 pointer-events: none 样式。他们这样做是为了当标签不处于 float 状态时，用户在输入悬停时看到正确的光标鼠标图标。您可以使用 css 轻松启用指针事件:

mat-label.has-events {
  pointer-events: auto;
}

<mat-label class="has-events">

或内联:

<mat-label style="pointer-events:auto;">

这应该没问题，因为您处于“始终” float 设置，但是如果您的输入不处于 float 状态，这将导致您的输入在悬停时显示错误的光标。您也可以通过在元素上设置正确的光标来解决此缺点，例如在 css 中设置 cursor: text 。

这样的 css 可以修复它，以便点事件仅在 float 状态下触发，但也保留默认光标:

mat-form-field.mat-form-field-should-float mat-label.has-events {
  pointer-events: auto;
  cursor: default;
}

此处演示了此行为和 css 选项:https://stackblitz.com/edit/angular-klmnau?file=app/form-field-label-example.html