材质对话框上的Mouseleave和Mouseenter

Question

我遇到的问题是，每当我在元素内移动光标时，都会触发mouseleave事件。如果它们仍位于元素内，则对话框将打开和关闭。有办法防止吗？例如，请参阅stackblitz。

export class DialogElementsExample {
    
      public dialogRef: MatDialogRef<DialogElementsExampleDialog>
      constructor(public dialog: MatDialog) {}
    
      openDialog() {
       this.dialogRef =  this.dialog.open(DialogElementsExampleDialog);
      }
    
      closeDialog(){
      console.log("close");
      this.dialogRef.close();
    }
    }


    <div>
      <button mat-button (mouseleave)="closeDialog()" (mouseenter)="openDialog()">Launch dialog</button>
    </div>
    
    
    <p style="background-color:red" (mouseleave)="closeDialog()" (mouseenter)="openDialog()">
      TEST 123 123 123 123 123
    <P>

https://stackblitz.com/edit/angular-3pqnyp?embed=1&file=src/app/dialog-elements-example.ts