如何阻止Angular $rootElement.on('click')触发ReactJS锚点标签跳转？

这种混合框架共存的事件冲突确实挺棘手的，不过既然你不想修改React代码，咱们完全可以从AngularJS这边入手调整事件处理逻辑，让React的功能先执行再跳转。下面给你两种可行的方案：

方案一：通过标识识别React链接并延迟跳转 #

首先，你可以和负责React代码的团队沟通，让他们给所有需要处理的<a>标签加上统一的标识（比如一个特定的class，比如react-nav-link，或者自定义属性data-react-link）。这样Angular这边就能精准定位到这些链接。

然后在Angular的运行块里修改根元素的点击监听逻辑：

angular.module('yourAppModule').run(function($rootElement, $timeout) {
  $rootElement.on('click', function(event) {
    // 向上遍历DOM，找到最接近的React链接元素
    let target = event.target;
    while (target && !target.classList.contains('react-nav-link')) {
      target = target.parentElement;
      if (!target) break;
    }

    if (target) {
      // 先阻止默认的页面跳转行为
      event.preventDefault();
      // 获取链接地址
      const href = target.getAttribute('href');
      
      // 用$timeout把跳转放到下一个事件循环，确保React的合成事件先执行完毕
      $timeout(() => {
        window.location.href = href;
      }, 0);
    }
  });
});

方案二：通过React根容器识别元素（无需修改React代码） #

如果没法让React团队加标识，也可以通过判断点击元素是否在React的根容器内来识别。假设你的React应用挂载在id="react-app-root"的容器里：

angular.module('yourAppModule').run(function($rootElement, $timeout) {
  const reactRoot = document.getElementById('react-app-root');
  
  $rootElement.on('click', function(event) {
    let target = event.target;
    // 检查当前点击元素是否属于React根容器内的<a>标签
    const isReactLink = reactRoot && reactRoot.contains(target) && target.tagName === 'A';

    if (isReactLink) {
      event.preventDefault();
      const href = target.getAttribute('href');
      
      $timeout(() => {
        window.location.href = href;
      }, 0);
    }
  });
});

原理说明 #

React的合成事件是绑定在document层面的，而AngularJS的$rootElement.on('click')是绑定在根元素上的原生事件监听，事件冒泡时Angular的监听会先触发，导致页面直接跳转，React的合成事件还没来得及执行。通过preventDefault阻止默认跳转，再用$timeout（或原生setTimeout）把跳转延迟到下一个事件循环，就能让React的合成事件先处理完毕，再执行页面跳转。

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