本文探讨了在javascript `onblur` 事件中使用 `alert()` 函数时，在firefox和chrome浏览器中出现的兼容性问题，包括firefox中`:focus-visible`样式残留和chrome中输入框无法失去焦点。文章提供了详细的解决方案，通过结合 `settimeout(..., 0)` 延迟执行和检查 `document.activeelement`，有效解决了这些跨浏览器行为差异，确保了 `onblur` 事件的预期功能。
在Web开发中，JavaScript事件处理是构建交互式用户界面的核心。然而，某些DOM事件与浏览器内置的交互，如 alert() 弹窗，可能会产生意想不到的副作用和跨浏览器兼容性问题。本文将深入探讨在 onblur 事件中调用 alert() 时，在Firefox和Chrome浏览器中遇到的具体问题，并提供一套健壮的解决方案。
问题描述
当在HTML元素的 onblur 事件处理器中直接调用 alert() 函数时，开发者可能会遇到以下问题：
- Firefox 中的 :focus-visible 样式残留： 在某些情况下，当一个输入字段失去焦点并触发 alert() 后，即使焦点已经移开，Firefox 仍然会保留 :focus-visible 伪类样式，导致视觉上的不一致。
- Chrome 中输入字段无法失去焦点： 更为严重的是，在Chrome浏览器中，当 onblur 触发 alert() 后，用户可能无法通过点击其他元素来使原输入字段失去焦点，仿佛焦点被“锁定”在该字段上。
为了更好地理解这些问题，我们先来看一个简单的、存在问题的JavaScript函数：
// 存在Firefox和Chrome中的兼容性问题
function blurring(el) {
console.log(el.id + ' pre alert');
alert('blurring ' + el.id); // 这里的alert是问题根源
console.log(el.id + ' post alert');
}这个函数在一个元素失去焦点时被调用，它会打印日志，然后弹出一个 alert 框。正是这个 alert 框的同步阻塞特性，与浏览器的事件循环和焦点管理机制产生了冲突。
解决方案：分步优化
为了解决上述跨浏览器问题，我们需要采取分步策略，逐步优化 blurring 函数。
步骤一：解决 alert() 的阻塞效应 - 使用 setTimeout(..., 0)
alert() 是一个同步阻塞函数，它会暂停JavaScript的执行，直到用户关闭弹窗。这会干扰浏览器正常的事件流和DOM更新。在Firefox中，这种阻塞导致 :focus-visible 样式在事件完成前未能正确移除。
一个常见的技巧是使用 setTimeout(function, 0) 将 alert() 的执行延迟到当前事件循环的末尾。这允许浏览器在 alert() 弹出之前完成当前事件（即 onblur）的所有默认行为，包括焦点转移和样式更新。
// 解决Firefox的:focus-visible残留问题，并为Chrome问题打下基础
function blurring(el) {
console.log(el.id + ' pre alert');
setTimeout(function () {
alert('blurring ' + el.id);
console.log(el.id + ' post alert');
}, 0); // 延迟alert的执行
}通过将 alert() 包装在 setTimeout(..., 0) 中，Firefox的 :focus-visible 问题可以得到解决，因为 onblur 事件本身有足够的时间完成，并在 alert 弹出前更新DOM。
步骤二：解决 Chrome 中 alert() 导致的重复 blur 事件
即使使用了 setTimeout(..., 0)，Chrome 仍然可能存在一个问题：当 alert() 弹窗关闭时，它有时会错误地重新触发 blur 事件，导致焦点行为异常，使得输入框难以失去焦点。
为了解决这个问题，我们需要在 alert() 弹出之前，检查当前文档的活动元素（document.activeElement）是否仍然是触发 blur 事件的元素。如果焦点已经成功转移到其他元素，那么这个 blur 事件是合法的，我们可以弹出 alert。如果 document.activeElement 仍然是原始元素，说明焦点并未真正转移，此时不应弹出 alert，以避免进一步的干扰。
// 解决Firefox和Chrome中的所有问题
function blurring(el) {
console.log(el.id + ' pre alert');
setTimeout(function () {
// 检查当前活动元素是否与触发blur的元素不同
// 确保焦点已实际转移
if (document.activeElement !== el) {
alert('blurring ' + el.id);
console.log(el.id + ' post alert');
}
}, 0);
}这个最终版本的 blurring 函数结合了 setTimeout(..., 0) 的延迟执行机制和 document.activeElement 的检查。setTimeout 确保了 blur 事件的默认行为（包括焦点转移）有时间完成，而 document.activeElement !== el 则进一步验证了焦点是否确实已经从 el 元素移开。只有当焦点确认已经转移时，alert() 才会执行，从而避免了Chrome中因 alert 关闭而导致的重复 blur 触发问题。
示例应用
为了更好地演示，我们可以结合一个简单的HTML结构来使用这个修复后的 blurring 函数：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Onblur Alert Cross-Browser Fix</title>
<style>
/* 示例样式，模拟:focus-visible */
input:focus {
outline: 2px solid blue;
}
input:focus-visible {
outline: 2px solid green; /* Firefox会默认显示此样式 */
}
div {
margin-top: 20px;
padding: 10px;
border: 1px solid #ccc;
background-color: #f9f9f9;
}
</style>
</head>
<body>
<h1>Onblur Alert 跨浏览器兼容性教程</h1>
<p>尝试在以下输入框中输入内容，然后点击其他输入框或页面空白区域，观察 `alert` 行为和焦点状态。</p>
<input type="text" id="input1" onblur="blurring(this)" placeholder="输入框 1">
<input type="text" id="input2" onblur="blurring(this)" placeholder="输入框 2">
<input type="text" id="input3" onblur="blurring(this)" placeholder="输入框 3">
<div>
这是一个普通文本区域，点击这里也会使输入框失去焦点。
</div>
<script>
// 解决Firefox和Chrome中的所有问题
function blurring(el) {
console.log(el.id + ' pre alert');
setTimeout(function () {
if (document.activeElement !== el) {
alert('blurring ' + el.id);
console.log(el.id + ' post alert');
}
}, 0);
}
</script>
</body>
</html>在这个示例中，当你在任何一个输入框中输入内容并将其失去焦点时（无论是点击另一个输入框还是点击 div 区域），blurring 函数都会被调用。由于我们应用了修复，alert 弹窗将按预期工作，不会导致Firefox中 :focus-visible 的残留，也不会在Chrome中阻止焦点转移。
总结与注意事项
- alert() 的慎用： alert() 作为一个同步阻塞函数，在现代Web开发中应尽量避免使用，尤其是在事件处理器中。它会严重影响用户体验和页面响应性。更推荐使用非阻塞的UI反馈机制，如自定义模态框、通知条或日志输出。
- setTimeout(..., 0) 的作用： 将任务放入事件队列的末尾，允许当前执行栈清空并处理完所有挂起的UI更新和事件。这对于处理同步阻塞或需要等待DOM状态更新的场景非常有用。
- document.activeElement： 这是一个非常有用的属性，用于获取当前文档中获得焦点的元素。在处理焦点相关的事件和逻辑时，它是判断焦点状态的关键。
- 跨浏览器测试： 即使是简单的JavaScript代码，也可能在不同浏览器中表现出细微的差异。进行彻底的跨浏览器测试是确保Web应用稳定性和用户体验的关键。
通过理解 alert() 的阻塞特性以及浏览器对焦点事件的处理机制，我们可以构建出更加健壮和兼容的JavaScript代码，从而提升Web应用的质量。
