React中如何在用户打开锚点链接时可靠执行函数并发送POST请求？

在React应用中，需要在用户打开链接时向服务器发送带负载的POST请求。当前实现通过onClick和onAuxClick回调过滤右键点击（因为右键不会直接打开链接），代码如下：

<a href={link} target="_blank" rel="noopener noreferrer" 
onClick={onLinkClicked} onAuxClick={onLinkClicked}>
    <FaExternalLinkAlt className={styles.headerButton} />
</a>

function onLinkClicked(event: MouseEvent) {
    if ([0,1].includes(event.button)) {
        alert('track click')
    }
}

但该方案会忽略右键点击后通过上下文菜单打开链接的情况。尝试过ping属性，但它无法携带请求体，且浏览器支持不稳定。需要一种可靠方案，既不误判也不遗漏任何打开链接的场景（包括上下文菜单操作）。

方法1：结合PointerDown与页面状态监听（覆盖所有场景） #

通过监听用户的指针交互，结合页面卸载/可见性变化事件，确保所有打开链接的操作都被追踪：

import { useEffect, useRef } from 'react';

const TrackedLink = ({ link, children }) => {
  const isLinkInteracted = useRef(false);

  // 发送追踪请求
  const trackLinkOpen = async () => {
    try {
      await fetch('/api/track-link', {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json',
        },
        body: JSON.stringify({
          url: link,
          timestamp: Date.now(),
          // 自定义负载字段
        }),
        keepalive: true, // 关键：确保请求在页面跳转/卸载前完成
      });
    } catch (err) {
      console.error('追踪请求失败:', err);
    }
  };

  // 标记用户已交互链接（左键/右键按下时触发）
  const handlePointerDown = () => {
    isLinkInteracted.current = true;
  };

  useEffect(() => {
    // 页面卸载或切换可见性时，检查是否有链接交互并发送请求
    const handlePageStateChange = () => {
      if (isLinkInteracted.current) {
        trackLinkOpen();
        isLinkInteracted.current = false; // 重置标记，避免重复触发
      }
    };

    document.addEventListener('visibilitychange', handlePageStateChange);
    window.addEventListener('beforeunload', handlePageStateChange);

    return () => {
      document.removeEventListener('visibilitychange', handlePageStateChange);
      window.removeEventListener('beforeunload', handlePageStateChange);
    };
  }, []);

  return (
    <a
      href={link}
      target="_blank"
      rel="noopener noreferrer"
      onPointerDown={handlePointerDown}
    >
      {children}
    </a>
  );
};

核心逻辑： #

• pointerdown事件在用户按下任意鼠标键时触发，标记用户有打开链接的意图
• keepalive属性强制浏览器保留请求，直到发送完成，避免页面跳转时中断请求
• visibilitychange和beforeunload监听页面状态，覆盖右键菜单打开链接后离开当前页面的场景

方法2：阻止默认跳转+上下文菜单监听（精确控制） #

通过拦截所有跳转行为，先发送追踪请求再手动打开链接，同时处理右键菜单场景：

import { MouseEvent } from 'react';

const TrackedLink = ({ link, children }) => {
  let trackTimeoutId;

  // 延迟发送追踪请求（避免用户打开右键菜单后取消操作）
  const scheduleTrack = () => {
    trackTimeoutId = setTimeout(async () => {
      await fetch('/api/track-link', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ url: link }),
        keepalive: true,
      }).catch(err => console.error(err));
    }, 500);
  };

  // 取消延迟的追踪请求
  const cancelTrack = () => {
    clearTimeout(trackTimeoutId);
  };

  // 处理左键/中键点击
  const handleDirectClick = async (event: MouseEvent) => {
    event.preventDefault();
    cancelTrack(); // 取消之前的延迟请求

    // 立即发送追踪请求
    await fetch('/api/track-link', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({ url: link }),
      keepalive: true,
    }).catch(err => console.error(err));

    // 根据用户操作打开链接
    const isNewTab = event.ctrlKey || event.metaKey || event.button === 1;
    if (isNewTab) {
      window.open(link, '_blank', 'noopener noreferrer');
    } else {
      window.location.href = link;
    }
  };

  // 处理右键菜单打开场景
  const handleContextMenu = () => {
    scheduleTrack();
  };

  // 用户离开链接时取消追踪
  const handleMouseLeave = () => {
    cancelTrack();
  };

  return (
    <a
      href={link}
      target="_blank"
      rel="noopener noreferrer"
      onClick={handleDirectClick}
      onAuxClick={handleDirectClick}
      onContextMenu={handleContextMenu}
      onMouseLeave={handleMouseLeave}
    >
      {children}
    </a>
  );
};

核心逻辑： #

• 监听contextmenu事件，用户打开右键菜单时延迟发送追踪请求
• 用户离开链接时取消延迟请求，避免无效追踪
• 左键/中键点击时，先发送请求再手动打开链接，确保无遗漏

关键注意事项 #

1. keepalive属性：必须添加到fetch请求中，否则页面跳转时浏览器可能中断未完成的POST请求
2. 避免误判：通过延迟逻辑或指针交互标记，区分用户的真实跳转意图，减少无效请求
3. 兼容性：keepalive和pointerdown在现代浏览器中均有良好支持，覆盖绝大多数用户场景

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