防止 blur 事件无限循环的关键在于控制事件触发的条件和逻辑。以下是一些常见的解决方法：✅ 1. 使用标志位（Flag）控制通过一个布尔变量来标记是否正在处理事件，避免重复触发。let isProcessing = false; element.addEventListener('blur', () => { if (isProcessing) return; isProces

本文深入剖析了表单验证中 blur 事件与 focus 操作不当引发的无限循环陷阱——尤其在 Chrome 等浏览器中，同步调用 focus() 会立即触发新一轮 blur，叠加 alert 阻塞导致弹窗+聚焦反复出现；文章不仅揭示了问题根源（事件循环机制与焦点重置的耦合），更提供了四种实用解法：以标志位精准拦截重复执行、用 setTimeout(0) 将焦点操作延至下一宏任务、杜绝 blur 中直接修改焦点、以及善用事件捕获或委托优化流控，其中 setTimeout 延迟聚焦被证实为最轻量、兼容性最佳的经典方案，并延伸推荐了 Toast 提示、requestAnimationFrame 和实时验证等现代替代实践，助你写出稳定、健壮、可访问的表单交互逻辑。

在表单验证中，若在 blur 回调内直接调用 focus()，会导致 Chrome 等浏览器重新触发 blur，形成无限弹窗+聚焦循环；正确做法是将 focus() 延迟到当前事件循环结束后执行（如使用 setTimeout(fn, 0)）。

在表单验证中，若在 blur 回调内直接调用 focus()，会导致 Chrome 等浏览器重新触发 blur，形成无限弹窗+聚焦循环；正确做法是将 focus() 延迟到当前事件循环结束后执行（如使用 setTimeout(fn, 0)）。

当对必填字段（如女性用户的“是否怀孕”下拉框）进行 blur 验证时，常见的错误写法是在 blur 处理函数中同步调用 focus()：

$('#selPregnant').on('blur', function() {
    if ($("#selGender :selected").val() === "F" && $("#selPregnant").val() === '') {
        alert('If the individual is female, the pregnancy question MUST be answered.');
        $('#selPregnant').focus(); // ⚠️ 危险：立即聚焦会再次触发 blur
        return false;
    }
});

该逻辑在 Chrome 中极易引发无限循环：blur → alert → focus → blur → alert → ...。根本原因在于，alert() 是同步阻塞操作，而 focus() 在同一事件循环中执行后，浏览器会因焦点重置而再次派发 blur 事件（尤其在 <select> 或 <input> 间切换时）。

✅ 正确解法：使用 setTimeout(..., 0) 将 focus() 推入下一个宏任务队列，确保其在当前 blur 事件完全结束后执行：

$('#selPregnant').on('blur', function() {
    if ($("#selGender :selected").val() === "F" && $("#selPregnant").val() === '') {
        alert('If the individual is female, the pregnancy question MUST be answered.');
        setTimeout(() => $('#selPregnant').focus(), 0); // ✅ 安全：延迟聚焦，避开当前事件循环
        return false;
    }
});

? 原理说明：setTimeout(fn, 0) 并非“立刻执行”，而是将回调注册为下一个宏任务（macro task），待当前调用栈清空、所有微任务（如 Promise.then）执行完毕后才运行。此时 blur 事件已彻底结束，focus() 不再触发新的 blur。

⚠️ 注意事项：

• 避免在 alert() 后同步操作 DOM 焦点，尤其是涉及表单控件交互时；
• 更现代的替代方案是使用非阻塞提示（如 Toast 或自定义模态框），配合 requestAnimationFrame(() => el.focus()) 进一步提升兼容性；
• 若需支持键盘导航（如 Tab 键），建议结合 aria-invalid 和实时验证（input/change 事件），而非仅依赖 blur。

综上，setTimeout(..., 0) 是解决 blur-focus 循环问题的经典、轻量且跨浏览器兼容的方案。

今天带大家了解了的相关知识，希望对你有所帮助；关于文章的技术知识我们会一点点深入介绍，欢迎大家关注golang学习网公众号，一起学习编程~