HostListener和event.target

Question

Good Morning, I've strange problem, I tried to find a solution, but I didn't ;/ I have a 3 anchor elements with the class 'navi-start' each as below.

 <a class="navi-start test-class"><i class="fab fa-accessible-icon"></i>x</a>
  <a class="navi-start"><i class="fab fa-accessible-icon"></i>y</a>
  <a class="navi-start"><i class="fab fa-accessible-icon"></i> z</a>

By the @HostListener I'd like to 'listen' clicks on the anchor elements. I used event.target as Element and it works almost perfectly. Problems begin to appear when I'm clicking on the icon element. event.target returns me !document.

  @HostListener('document:click', ['$event'])


CheckClick(event) {
    const targetElement = event.target as Element;
    const textElement = targetElement.textContent;
    const query = document.querySelector('.test-class');

if (targetElement.classList.contains('navi-start')) {

  this.rend.removeClass(query, 'test-class');
  this.rend.addClass(targetElement, 'test-class');
  if (textElement === 'x') {
    this.router.navigate(['main']);
  }
  else if (textElement === 'y') {
    this.router.navigate(['main/parts']);
  }
  else {
    this.router.navigate(['main/motorcycle']);
  }
}
else console.log(targetElement);

}

and console.log(targetElement) returns me just icon element. Could someone tell me how to solve my problem?

Answer 1

It would seem that you are listening for clicks in the entire document by

@HostListener('document:click' ...

I would recommend trying to narrow the scope, perhaps listening for 'click' instead if possible, this would limit the listener to the element the directive was put on.

your function will receive the click events. The target for each of those events will be the actual element that was clicked, therefor you will get icon if you click on the icon.

what you could do is check if the element matches what you expect and if not traverse the dom to find a matching parent. thus capturing the click inside the expected target. so if you click the icon you will still get a match on the anchor tag. like so:

CheckClick(event) {
    let targetElement = event.target as Element; //changed to let
    const textElement = targetElement.textContent;
    const query = document.querySelector('.test-class');

    if (!targetElement.matches('.navi-start')) { //if clicked element doesn't have class '.navi-start'
      targetElement = targetElement.closest('.navi-start') as Element; // find parent that has class 'navi-start'
    }
    if (targetElement) { //if targetElement of type 'navi-start' was found
      this.rend.removeClass(query, 'test-class');
      this.rend.addClass(targetElement, 'test-class');
      if (textElement === 'x') {
        this.router.navigate(['main']);
      }
      else if (textElement === 'y') {
        this.router.navigate(['main/parts']);
      }
      else {
        this.router.navigate(['main/motorcycle']);
      }
    }
    else {
      console.log(targetElement);
    }
}

Answer 2

Anyway I found easiest way just by using Angular directives without any methods.

<a class="navi-start" [routerLink]="['/main']"  routerLinkActive="test-class" [routerLinkActiveOptions]="{ exact: true }"><i class="fab fa-accessible-icon" ></I>x</a>
  <a class="navi-start" routerLink="parts"  routerLinkActive="test-class"><i class="fab fa-accessible-icon" ></i>y</a>
  <a class="navi-start" routerLink="motorcycle"  routerLinkActive="test-class"><i class="fab fa-accessible-icon" ></i>z</a>