Node.js应用单选按钮点击事件问题：弹窗与跳转无法同时实现

问题说明 #

开发Node.js应用时，页面动态生成的单选按钮需要实现点击选中时同时弹出提示框并跳转到指定内部URL，目前单独实现弹窗或跳转均正常，但无法同时完成两个操作。

解决方案 #

核心原因是alert()是同步阻塞函数，必须等待用户点击弹窗的「确定」按钮后，后续的跳转代码才会执行。只需在弹窗代码后添加页面跳转逻辑即可，同时可以优化代码避免重复的switch判断：

修改后的JavaScript代码片段

document.body.addEventListener('change', function (e) {
  let target = e.target;
  // 仅处理单选按钮的change事件
  if (target.classList.contains('RdBtn')) {
    const btnId = target.id;
    alert(btnId);
    // 跳转到目标路由，拼接参数
    window.location.href = `/RouteSpecial?p=${btnId}`;
  }
})

完整修改后的specialDisplayFunc中脚本部分

htmlStr += "<script>"
htmlStr += "document.body.addEventListener('change', function (e) {"
htmlStr += "  let target = e.target;"
htmlStr += "  if (target.classList.contains('RdBtn')) {"
htmlStr += "      const btnId = target.id;"
htmlStr += "      alert(btnId);"
htmlStr += "      window.location.href = `/RouteSpecial?p=${btnId}`;"
htmlStr += "  }"
htmlStr += "})"
htmlStr += "</script>"

关键说明 #

• window.location.href用于触发页面跳转，属于浏览器端的页面导航操作，可与Node.js后端路由正常配合工作。
• 先执行alert()，用户确认后才会执行跳转逻辑，确保两个操作都能完成。
• 通过判断目标元素的类名RdBtn，避免处理其他元素的change事件，提升代码健壮性。

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