Angular 从多个按钮到单个方法的角度捕捉事件

我有一些代码，我试图在mouseenter上做一些事情，在其他鼠标事件上做一些其他事情

就像：

if (this.button sends mouseenter event) {
    do something
} else if (any other mouse event) {
    do something else
}

app.component.html

<div id="one">
    <button type="button"
      (mouseenter)="listen($event.target)"
      (mouseleave)="listen($event.target)"
      (mousedown)="listen($event.target)"
      (mouseup)="listen($event.target)">
    </button>
</div>

<div id="two">
    <button type="button"
      (mouseenter)="listen($event.target)"
      (mouseleave)="listen($event.target)"
      (mousedown)="listen($event.target)"
      (mouseup)="listen($event.target)">
    </button>
</div>

<div id="three">
    <button type="button"
      (mouseenter)="listen($event.target)"
      (mouseleave)="listen($event.target)"
      (mousedown)="listen($event.target)"
      (mouseup)="listen($event.target)">
    </button>
</div>

我想做的是：

例如：

如果#id的按钮事件是mouseenter。。。。做点什么 其他的 如果是任何其他鼠标事件。。。。做点别的

我试图避免必须添加以下内容：

(mouseenter)="listen($event.target)"
(mouseleave)="listen($event.target)"
(mousedown)="listen($event.target)"
(mouseup)="listen($event.target)"

每一个按钮

简而言之，我该怎么做？

而不是在每个按钮中的每个事件上使用（mouseenter）=“listen（$event.target.parentElement.id）”，这将把父元素的id（如果有）传递给函数

您可以在函数顶部为id声明一个变量，并只向其传递事件，如下所示：

在component.html中：

  <div id="one">
    <button type="button"
      (mouseenter)="listen($event)"
      (mouseleave)="listen($event)"
      (mousedown)="listen($event)"
      (mouseup)="listen($event)">
    </button>
  </div>

---

您可以为不同的事件绑定不同的处理程序。试试下面的方法

模板

控制器

导出类AppComponent实现OnInit{
构造函数（）{}
恩戈尼尼特（）{
}
鼠标按键（目标）{
//处理事件
}
二号鼠标（目标）{
//处理事件
}
鼠标三（目标）{
//处理事件
}
notMouseEnter（目标）{
//处理事件
}
}

您还可以为模板中的事件绑定多个处理程序。 例如

---

它不知道mouseenter…我应该把这个放在.ts页面的什么地方？我用的是Angular 9I，我刚刚编辑了我的答案。（mouseenter）在HTML组件中用于处理事件并将其传递给ts组件（函数所在的位置）。为什么不向函数传递第二个参数
（mouseenter）=侦听（$event.target，'id1'）
或simple
（mouseenter）=侦听（'id1'）
？
  <div id="one">
    <button type="button"
      (mouseenter)="listen($event)"
      (mouseleave)="listen($event)"
      (mousedown)="listen($event)"
      (mouseup)="listen($event)">
    </button>
  </div>

listen(e) {
    const id = e.target.parentElement.id;

    if (id === "firstId") {
        //do something
    } else if (id === "secondId") {
        //do something else
    }
}