角度：如何获得<li>而不是<ul>来自点击事件

Question

I have an Angular component that has a <ul> element contains <li> elements. I have the following code:

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

I want func() to be executed whenever I click anywhere on the screen except for on certain <li> elements that have a disabled class applied to them. What I was hoping is that event.target would return the <li> I clicked on, so that I could do something like

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

The problem is that event.target returns the <ul> rather than the <li> . Here's my template:

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

This template can't change, because it's part of someone else's code.

Does anyone know how to approach this?

Answer 1

can you try this approach:

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

a simple solution is bind these disabled elemnt to mousedown event and call event.stopPropagation() method.

template

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

component

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

demo 🚀🚀

Update !!

you can still do the samething by using directive like this and target nore event

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

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

}

template

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

demo 🌟