Angular：-当指针进入同级控件时事件失火

Question

要求：

1. 显示阵列中的图像
2. 每张图片的中心都有一个按钮，应该只在图片悬停时显示。

所以，根据要求，我使用 ngFor 循环来显示图像，并且按钮只有当用户在图像上输入鼠标时才会获得布尔值 true，它工作正常，但是当我将指针指向按钮时，两个事件都被触发:- 鼠标进入和鼠标离开。

<div style="display:flex;justify-content:center;align-items:center;" class='thumbnail'>
<div *ngFor="let gallery of galleries; let i = index ">

      <img 
        [src]="imagesrc "
        alt="gallery thumbnail" (mouseenter)="enter(i)" (mouseleave)="leave(i)"/>

   <button *ngIf='showEditButton' class="btn btn-primary" style="position:absolute;">EDIT</button>
  </div>


 public enter(i) {
    this.hoverIndex = i;
console.log('mouse enter');
   }

   public leave(i) {
    this.hoverIndex = null;
console.log('mouse leave');
   }

Answer 1

我的建议是将 (mouseenter) 和 (mouseleave) 事件放在包含图像和按钮的 div 上（使用 *ngFor=""）。

我相信正在发生的事情是您的鼠标离开 <img> 并进入 <button> 从而触发事件。

我还建议您将这篇文章的标题更改为更合适的名称： 以"Angular: Event Misfire when Pointer Enters Sibling Control" 为例。