点击页面超链接时addEventListener重复发送6次日志的原因排查

以下是常见原因及对应的排查、解决方法：

1. 事件监听器被重复绑定6次 #

这是最常见的诱因——你的代码可能在同一个元素上多次调用了addEventListener，导致每次点击都会触发所有绑定的监听器。

• 排查手段：在绑定监听器的代码上方加一行日志，查看控制台输出次数：

  console.log('绑定点击监听器');
  document.querySelector('your-link-selector').addEventListener('click', sendWebhookLog);
  

  如果控制台打印6次，说明监听器被重复绑定了。
• 解决方法：
  • 确保绑定逻辑只执行一次（比如放在页面加载完成的回调、框架初始化生命周期钩子中）；
  • 若无法避免重复执行绑定逻辑，绑定前先移除旧监听器：

    const link = document.querySelector('your-link-selector');
    link.removeEventListener('click', sendWebhookLog); // 先移除旧监听器
    link.addEventListener('click', sendWebhookLog); // 再绑定新的
    

2. 事件冒泡/捕获触发多层级事件 #

如果超链接的父元素也绑定了相同的点击事件，事件冒泡（或捕获）阶段会触发所有层级的监听器，刚好凑够6次触发。

• 排查手段：在事件处理函数中打印触发元素：

  function sendWebhookLog(e) {
    console.log('触发元素:', e.target, '绑定元素:', e.currentTarget);
    // 你的webhook发送逻辑
  }
  

  若输出的target和currentTarget不同，说明是冒泡导致的重复触发。
• 解决方法：
  • 在处理函数中阻止事件冒泡：

    function sendWebhookLog(e) {
      e.stopPropagation();
      // 你的webhook发送逻辑
    }
    

  • 检查父元素的事件绑定，移除不必要的重复绑定。

3. 选择器匹配了多个元素 #

如果用querySelectorAll选择超链接，且页面中恰好有6个匹配元素，每个元素都绑定了监听器，点击时可能因冒泡或误绑触发多次请求。

• 排查手段：打印选中的元素数量：

  const links = document.querySelectorAll('your-link-selector');
  console.log('选中的链接数量:', links.length);
  

  若数量为6，说明绑定到了多个元素上。
• 解决方法：
  • 调整选择器，只选中目标超链接（比如给目标链接加唯一id，用getElementById选择）；
  • 若需给多个链接绑定，通过e.target判断，确保只有当前点击的链接触发逻辑。

4. 框架重渲染导致重复绑定（React/Vue等） #

在前端框架中，若未正确清理监听器，组件每次重渲染都会重新绑定，积累到6次后就会触发6次请求。

• 解决方法：
  • React中使用useEffect的清理函数：

    useEffect(() => {
      const link = document.getElementById('target-link');
      const handler = () => sendWebhookLog();
      link.addEventListener('click', handler);
      return () => link.removeEventListener('click', handler); // 组件卸载时清理
    }, []); // 空依赖数组确保只执行一次
    

  • Vue中在onMounted绑定，onUnmounted清理：

    import { onMounted, onUnmounted } from 'vue';
    onMounted(() => {
      const link = document.getElementById('target-link');
      const handler = () => sendWebhookLog();
      link.addEventListener('click', handler);
      onUnmounted(() => link.removeEventListener('click', handler));
    });
    

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