如何在Angular应用中追踪所有点击（兼容stopPropagation场景）

现有代码用于追踪Angular应用内的页面点击：

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

但部分子组件内的链接（如下方的Modify链接）因为使用了event.stopPropagation()，点击时无法触发handleDocumentClicks：

list.component.html

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

list.component.ts

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

请问是否存在无需修改子组件代码、不移除stopPropagation()的方案，以实现所有文档点击的追踪？

event.stopPropagation()仅会阻止事件在冒泡阶段的传播，不会影响捕获阶段的事件触发。我们可以直接通过原生JS在document上绑定捕获阶段的点击监听，绕过Angular默认监听冒泡阶段的@HostListener限制，且无需修改任何子组件代码。

实现代码 #

在根组件或负责追踪的服务中添加如下逻辑：

import { Component, OnInit, OnDestroy } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app-root.component.html',
})
export class AppRootComponent implements OnInit, OnDestroy {
  private clickCaptureListener: () => void;

  ngOnInit(): void {
    // 第三个参数设为true，指定事件在捕获阶段触发
    this.clickCaptureListener = (event: MouseEvent) => {
      console.log('捕获到全局点击:', event.target);
      // 这里添加你的点击追踪逻辑
    };
    document.addEventListener('click', this.clickCaptureListener, true);
  }

  ngOnDestroy(): void {
    // 组件销毁时移除监听，避免内存泄漏
    document.removeEventListener('click', this.clickCaptureListener, true);
  }
}

原理说明 #

事件传播分为三个阶段：

1. 捕获阶段：事件从document逐层向下传递到目标元素
2. 目标阶段：事件到达目标元素本身
3. 冒泡阶段：事件从目标元素逐层向上传递回document

子组件中的event.stopPropagation()只会阻断冒泡阶段的传播，而我们在捕获阶段绑定的监听会在冒泡之前就触发，因此不受其影响。

注意事项 #

• 务必在组件/服务销毁时移除事件监听，防止内存泄漏
• 如果使用全局服务实现追踪，需在应用退出或服务销毁时清理监听

内容的提问来源于stack exchange，提问作者Haradzieniec