typescript 如何将 event.target 作为 Angular 2 中的对象？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/42719991/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to get event.target as an object in Angular 2?
提问by Byoth
First, I'm sorry to my deficient english.
首先，我很抱歉我的英语不足。
.
.
I want write code if click anywhere except .do-not-click-here, call myFunction().
我想写代码，如果点击任何地方，除了.do-not-click-here调用myFunction().
So I wrote code like below.
所以我写了如下代码。
document.addEventListener('click', (event) => {
if(event.target.classList.includes('do-not-click-here')) {
myFunction();
}
)
But this code return error "Property 'classList' does not exist on type 'EventTarget'."
但此代码返回错误“属性 'classList' 在类型 'EventTarget' 上不存在。”
.
.
So I tried debugging through console.log.
所以我尝试通过console.log.
.
.
When I tried console.log(event);
当我尝试 console.log(event);
received event.targetas a javascript object. (I want it)
event.target作为 javascript 对象接收。（我要它）
.
.
When I tried console.log(event.target);
当我尝试 console.log(event.target);
received event.targetas an element(?). so event.target.classListis not working. (Maybe)
event.target作为元素接收（？）。所以event.target.classList不工作。（或许）
.
.
How to get event.target.classList?
如何获得event.target.classList？
or is there a better way than I thought for I wanted?
或者有没有比我想要的更好的方法？
回答by hiper2d
Other answers are good, this is just a more-angular-style alternative. You can create a global click listener in any of your components this way:
其他答案很好，这只是一个更有角度的选择。您可以通过以下方式在任何组件中创建全局单击侦听器：
@HostListener('document:click', ['$event.target'])
onClick(element: HTMLElement) {
if(element.classList.contains('do-not-click-here')) {
myFunction();
}
}
回答by anshuVersatile
document.addEventListener('click', (event) => {
if(event.target.classList.contains('do-not-click-here')) {
myFunction();
}
)
use containsinstead includes
使用contains替代includes
回答by Bougarfaoui El houcine
<button (click)="onClick($event)">click</button>
export class Component{
onClick(event){
if(event.target.classList.contains('do-not-click-here')) {
myFunction();
}
}
}
回答by bryan60
you can be REALLY angular use a class as a directive selector:
您可以真正有角度地使用类作为指令选择器：
@Directive({
selector: '.do-not-click-here'
})
export class DoNotClickDirective {
@HostListener('click', ['$event'])
onClick(event: MouseEvent) {
console.log('dont click me!', event);
}
}
now everything with that class will run that function when clicked
现在该类的所有内容都将在单击时运行该函数
blitz (check / click hello component for usage): https://stackblitz.com/edit/angular-7-master-zfzrrb?file=src/app/do-not-click.directive.ts
闪电战（检查/单击 hello 组件以了解用法）：https: //stackblitz.com/edit/angular-7-master-zfzrrb?file=src/app/do-not-click.directive.ts
