Angular 将多个按钮的事件捕获到一个方法中

Question

我有一些代码，我试图在 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>

app.component.ts

listen(e) {
    // I need to get the parent's id
}

我想做的是：

示例：

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

我试图避免必须添加这个：

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

每个按钮。

简而言之，我该怎么做？

Answer 1

而不是在每个按钮的每个事件上使用 (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>

在component.ts中：

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

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

Answer 2

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

模板

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

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

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

控制器

export class AppComponent implements OnInit {
  constructor() { }

  ngOnInit() {
  }

  mouseEnterOne(target) {
    // handle event
  }

  mouseEnterTwo(target) {
    // handle event
  }

  mouseEnterThree(target) {
    // handle event
  }

  notMouseEnter(target) {
    // handle event
  }
}

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

<button type="button"
  (mouseenter)="mouseEnterOne($event.target); anotherHandler($event); oneOtherHanlder('one')"
</button>

Angular 将多个按钮的事件捕获到一个方法中

Angular capture events from multiple buttons into a single method

typescript

angular

angular9