Outlook加载项新增按钮点击触发两次问题求助

问题场景 #

开发Outlook加载项时新增了一个按钮，点击后会触发两次事件。排查taskpane.js和taskpane.html未发现重复按钮ID或手动添加的重复事件监听器，但控制台显示taskpane.js与Webpack打包生成的d47f4b55d6e75be28dfc.js都调用了generateSuggestedEmail函数，其他功能按钮无此异常。

按钮事件注册代码片段：

document.getElementById("generate-email-button").addEventListener("click", function () {
  var recipientType = document.getElementById("new-email-recipient-type").value;
  var emailType = document.getElementById("email-type").value;
  var emailContent = document.getElementById("email-content").value;
  var emailTone1 = document.getElementById("emailTone1").value;
  var emailTone2 = document.getElementById("emailTone2").value;
  
  generateSuggestedEmail(recipientType, emailType, emailContent, emailTone1, emailTone2);
});

控制台输出：

d47f4b55d6e75be28dfc.js:797 generateSuggestedEmail called
taskpane.js:721 generateSuggestedEmail called

排查方向 #

• Webpack打包重复引入
  • 检查webpack配置的entry项，确认是否同时包含了taskpane.js和依赖它的其他文件，导致模块被重复打包
  • 排查是否开启了热模块替换(HMR)，开发环境下HMR可能会在模块更新时重复注册事件监听器
• DOM重复渲染/初始化
  • 确认Outlook任务窗格是否被重复初始化，导致同一按钮元素被多次绑定事件
  • 在控制台执行document.getElementById("generate-email-button").getEventListeners("click")，查看注册的事件数量和具体来源
• 事件冒泡或委托冲突
  • 检查按钮的父级元素是否也注册了点击事件，是否因为事件冒泡导致两次触发（虽然此场景下可能性较低，但可以用event.stopPropagation()测试验证）

临时解决方案 #

如果暂时无法定位根本原因，可以通过以下方式快速解决重复触发问题：

• 添加执行锁：给核心函数加状态锁，短时间内只允许执行一次

  let isGenerating = false;
  function generateSuggestedEmail(recipientType, emailType, emailContent, emailTone1, emailTone2) {
    if (isGenerating) return;
    isGenerating = true;
    
    // 原函数逻辑代码
    // ...
    
    // 逻辑执行完成后释放锁
    isGenerating = false;
  }
  

• 显式移除旧监听器再注册：将事件处理函数提取为具名函数，注册前先移除已存在的监听器（匿名函数无法直接移除，所以必须用具名函数）

  function handleGenerateButtonClick() {
    var recipientType = document.getElementById("new-email-recipient-type").value;
    var emailType = document.getElementById("email-type").value;
    var emailContent = document.getElementById("email-content").value;
    var emailTone1 = document.getElementById("emailTone1").value;
    var emailTone2 = document.getElementById("emailTone2").value;
    
    generateSuggestedEmail(recipientType, emailType, emailContent, emailTone1, emailTone2);
  }
  
  const generateBtn = document.getElementById("generate-email-button");
  generateBtn.removeEventListener("click", handleGenerateButtonClick);
  generateBtn.addEventListener("click", handleGenerateButtonClick);
  

• 调整Webpack打包策略：检查optimization配置，确认splitChunks是否导致了重复chunk生成；或者移除重复的入口配置，避免模块被多次打包

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