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 ??

更新!!

您仍然可以通过使用类似这样的指令和目标Nore事件来做相同的事情

@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 ?

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

2 个答案: