HostListener和event.target

Question

早上好，我有一个奇怪的问题，我试图找到一个解决方案，但是我没有找到； /我有3个锚元素，每个锚元素的类为“ navi-start”，如下所示。

 <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>

通过@HostListener，我想“监听”锚元素上的单击。 我使用event.target作为元素，它几乎完美地工作。 当我单击图标元素时，问题开始出现。 event.target返回我的文档！

  @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);

}

和console.log（targetElement）仅返回图标元素。 有人可以告诉我如何解决我的问题吗？

Answer 1

看来您正在侦听整个文档中的点击

@HostListener('document:click' ...

我建议尝试缩小范围，如果可能的话，也许监听'click'，这会将监听器限制为放置该指令的元素。

您的函数将收到点击事件。 这些事件中的每一个的目标都将是被单击的实际元素，因此，如果单击图标，您将获得图标。

您可以做的是检查元素是否符合您的期望，如果不遍历dom来找到匹配的父对象。 从而在预期目标内捕获点击。 因此，如果您单击该图标，您仍会在锚标记上找到匹配项。 像这样：

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

无论如何，我发现最简单的方法就是使用没有任何方法的Angular指令。

<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>