javascript - Angular :如何从点击事件获取而不是

Question

我有一个Angular组件，其中的<ul>元素包含<li>元素。我有以下代码:

  @HostListener('document:mousedown', ['$event'])
  onMouseDown(event: MouseEvent): void {
    func();
  }

我希望只要我在屏幕上的任意位置单击，就可以执行 func()，但某些应用了 <li>类的 disabled元素除外。我希望 event.target将返回我单击的 <li>，以便我可以执行类似的操作

if (!event.target.disabled) {
    func()
}

问题在于 event.target返回的是 <ul>而不是 <li>。这是我的模板:

<div>
  <ul>
    <ng-container>
      <ng-template>
        <li>
        <li class="disabled">
        <li>
      </ng-template>
    </ng-container>
  </ul>
</div>

该模板不能更改，因为它是其他人的代码的一部分。

有人知道该如何处理吗？

Answer 1

你可以尝试这种方法:

https://stackblitz.com/edit/angular-kfonyy

  @HostListener('document:click', ['$event'])
  onMouseDown(event): void {
    this.func(event.target)
  }

  func(element) {
    if (element.tagName == ‘LI’ && element.classList.contains('disabled')) {
      console.log("clicked disabled li")
    } else {
      console.log("clicked elsewhere")
    }
  }