JavaScript弹窗反复弹出无法关闭？input与blur事件冲突排查

问题原因 #

当在文本框输入test触发oninput事件时，执行alert('input')——由于alert是阻塞式模态对话框，弹出时会强制夺走文本框的焦点，进而触发blur事件。但此时JS的事件循环会被第一个alert阻塞，blur事件的回调会进入任务队列等待。当你关闭第一个弹窗后，第二个alert('Blur')才会弹出。

部分浏览器在处理连续弹出的模态对话框时，会出现焦点绑定异常：第二个弹窗的关闭按钮无法正确获取焦点，导致点击操作无效，视觉上表现为“无法关闭第二个弹窗”。本质是连续阻塞式弹窗干扰了浏览器的焦点管理逻辑。

最优解决方案 #

方案1：替换阻塞式alert为非阻塞提示（推荐） #

放弃使用原生alert，改用自定义非阻塞提示组件，既不会打断事件循环，也不会触发焦点异常问题。示例代码：

// 自定义非阻塞提示函数
function showTip(message) {
  const tip = document.createElement('div');
  tip.style = `
    position: fixed;
    top: 30px;
    left: 50%;
    transform: translateX(-50%);
    padding: 12px 24px;
    background-color: #2c3e50;
    color: #fff;
    border-radius: 4px;
    z-index: 9999;
    box-shadow: 0 2px 8px rgba(0,0,0,0.2);
  `;
  tip.textContent = message;
  document.body.appendChild(tip);
  // 2秒后自动消失
  setTimeout(() => tip.remove(), 2000);
}

function TestBlur() {
  showTip('Blur');
}

function TestInput() {
  const x = $("#TextboxComments").val();
  if (x === 'test') {
    showTip('input');
  }
}

方案2：用状态标记避免连续阻塞弹窗 #

如果必须保留原生alert，可以通过一个状态变量标记当前是否有弹窗正在显示，避免连续触发：

let isModalActive = false;

function TestBlur() {
  if (!isModalActive) {
    isModalActive = true;
    alert('Blur');
    isModalActive = false;
  }
}

function TestInput() {
  const x = $("#TextboxComments").val();
  if (x === 'test' && !isModalActive) {
    isModalActive = true;
    alert('input');
    isModalActive = false;
  }
}

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