CODEWITHSUNDEEP
javascriptangulartypescriptclickstoppropagation
Haradzieniec
Haradzieniec

Reputation: 9338

Detect all clicks inside Angular app for all components, even with stopPropagation() used

This code is almost nicely used to track all clicks inside the Angular application on the page:

  @HostListener('document:click', ['$event.target'])
  handleDocumentClicks(target) {
    console.log('A click happened. This is displayed for all links but unfortunately not for Modify link because its handleModifyClick contains event.stopPropagation()');
    console.log(target);
    //do some logic here
  }

Unfortunately, for some links inside child components such as

list.component.html

<a href="javascript:;" (click)="handleModifyClick($event)">Modify</a>

list.component.ts

  handleModifyClick(event) {
    event.stopPropagation();
    // some more ts logic comes here
  }

handleDocumentClicks is not triggered, when we click on Modify link, because handleModifyClick function contains stopPropagation() method.

Is there a smart way to track all document clicks without changing the code inside child components, without removing stopPropagation() methods inside all child components?

Upvotes: 0

Views: 436

Answers (0)

Related Questions