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

339 Views Asked by At

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?

0

There are 0 best solutions below