0
356
ViewsHow to get event.target as an object in Angular 2?
First, I'm sorry to my deficient english.
.
I want write code if click anywhere except .do-not-click-here, call 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'."
.
So I tried debugging through console.log.
.
When I tried console.log(event);
received event.target as a javascript object. (I want it)
.
When I tried console.log(event.target);
received event.target as an element(?). so event.target.classList is not working. (Maybe)
.
How to get event.target.classList?
or is there a better way than I thought for I wanted?
3 answers
Answer question0
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();
}
}
0
<button (click)="onClick($event)">click</button>
export class Component{
onClick(event){
if(event.target.classList.contains('do-not-click-here')) {
myFunction();
}
}
}
0
document.addEventListener('click', (event) => {
if(event.target.classList.contains('do-not-click-here')) {
myFunction();
}
)
use contains instead includes