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

Question

我有一个 Angular 组件，它有一个<ul>元素包含<li>元素。我有以下代码：

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

我希望每当我单击屏幕上的任意位置时func()执行，但某些应用了disabled类的<li>元素除外。我希望的是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

一个简单的解决方案是将这些禁用的参数绑定到鼠标按下事件并调用event.stopPropagation()方法。

模板

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

元件

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

演示 🚀🚀

更新！！

您仍然可以通过使用这样的指令和目标 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>

演示 🌟