如何在Angular 2中将event.target作为对象获取？

Question

首先，对我英语水平不足感到抱歉。

。

我想编写代码，如果单击.do-not-click-here，请单击myFunction()。

所以我写了下面的代码。

document.addEventListener('click', (event) => {
  if(event.target.classList.includes('do-not-click-here')) {
    myFunction();
  }
)

但是此代码返回错误“类型'EventTarget'上不存在属性'classList'。”

。

所以我尝试通过调试console.log。

。

当我尝试 console.log(event);

在此处输入图片说明

event.target作为javascript对象接收。（我要它）

。

当我尝试 console.log(event.target);

在此处输入图片说明

event.target作为元素（？）接收。所以event.target.classList不起作用。（也许）

。

如何获得event.target.classList？

还是有比我想的更好的方法？

Answer 1

其他答案也不错，这只是更具角度的选择。您可以通过以下方式在任何组件中创建全局点击侦听器：

@HostListener('document:click', ['$event'])
onClick(event: MouseEvent) {
    // cast the target to prevent errors;
    var element = event.target as HTMLElement;
    if(element.classList.contains('do-not-click-here')) {
        myFunction();
    }
}

Answer 2

<button (click)="onClick($event)">click</button>

export class Component{


onClick(event){
   if(event.target.classList.contains('do-not-click-here')) {
    myFunction();
  }
}
}