Angular：如何从点击事件中获取 <li> 而不是 <ul>

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")
    }
  }

Answer 2

一个简单的解决方案是将这些禁用的元素绑定到 mousedown 事件并调用event.stopPropagation() 方法。

模板

<li class="disabled" (mousedown)="handler($event)">click</li>

组件

handler(e:MouseEvent){
      e.stopPropagation();   
}

demo ??

更新！！

你仍然可以通过使用这样的指令和目标事件来做同样的事情

@Directive({
  selector: '[prevEvents]'
})
export class PrevEventsDirective {

  @HostListener("mousedown", ["$event"]) 
  @HostListener("mouseup", ["$event"]) 
  @HostListener("click", ["$event"]) 
  public handler(e:MouseEvent) {
    e.stopPropagation();
  }

}

模板

<li class="disabled" prevEvents>click</li>

demo ?