前端表单失焦校验为什么抖动：focusout、relatedTarget 与事件委托

商品编辑页里，用户从“商品名称”跳到“价格”时，校验提示本该安静地从一个字段交给下一个字段，却常常出现红字闪一下、又马上消失的抖动。根因通常不是校验规则，而是把不冒泡的 blur 分别绑在每个输入框上，同时没有判断焦点究竟移到了哪里。

先把抖动现场拆成两个事件

先准备一个字段组：输入框旁边有错误提示，组内还放一个“查看规则”按钮。用户从输入框点到按钮时，业务上仍然停留在这个字段组；用户点到下一个字段时，才算真正离开当前组。

  

    价格
    查看规则
    

  

如果给每个 input 绑定 blur，焦点从输入框进入组内按钮时，输入框会立刻触发清理或远程校验。按钮再把焦点交回输入框，页面就会重复刷新提示。focusout 会冒泡到 form，因此可以把入口收拢到一处。

用 focusout 和 closest 收拢字段入口

事件委托的第一步只做定位，不急着校验。event.target 是实际失去焦点的元素，closest('[data-field]') 沿父节点向上找到字段组；找不到时直接返回，避免把表单里的普通按钮当作字段。

const form = document.querySelector('#product-form');

form.addEventListener('focusout', (event) => {
  const field = event.target.closest('[data-field]');
  if (!field || !form.contains(field)) return;

  scheduleFieldValidation(field, event.relatedTarget);
});

这里的 form、focusout、closest('[data-field]') 和 scheduleFieldValidation 是同一条调用链上的真实节点。动态追加的价格字段也会被表单捕获，不必在新增节点后重新绑定监听器。

用 relatedTarget 判断是否真的离开字段组

relatedTarget 表示接下来要接收焦点的元素。它可能是字段组里的按钮，也可能是下一个字段；从页面切出时还可能是 null。判断时先确认目标是否仍属于当前 field，再决定是否清理旧提示。

function scheduleFieldValidation(field, relatedTarget) {
  const staysInField = relatedTarget instanceof Node
    && field.contains(relatedTarget);

  if (staysInField) return;

  validateField(field);
}

function validateField(field) {
  const input = field.querySelector('input');
  const error = field.querySelector('.error');
  const value = input.value.trim();

  if (value === '') {
    error.textContent = '价格不能为空';
    input.setAttribute('aria-invalid', 'true');
    return;
  }

  error.textContent = '';
  input.removeAttribute('aria-invalid');
}

字段组内移动不触发第二次校验，离开到组外才调用 validateField。relatedTarget 为 null 时，staysInField 为假，页面切出也会完成一次校验；如果业务不希望切出时提示，可以单独加上页面可见性策略，而不是猜测焦点事件顺序。

异步校验要丢弃过期响应

价格还可能需要请求服务端检查库存或小数位。用户快速修改两次时，第一次请求可能晚于第二次返回；如果不标记顺序，旧结果会覆盖新输入。给每个字段保存一个递增的 requestId，只接受最后一次请求。

const requestIds = new WeakMap();

async function validateRemote(field) {
  const input = field.querySelector('input');
  const error = field.querySelector('.error');
  const requestId = (requestIds.get(field) || 0) + 1;
  requestIds.set(field, requestId);

  const response = await fetch('/api/product/price-check', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify({ price: input.value.trim() })
  });
  const result = await response.json();

  if (requestIds.get(field) !== requestId) return;
  error.textContent = result.valid ? '' : '价格格式不符合规则';
}

若项目不需要远程检查，保留同步的 validateField 即可；不要为了“统一架构”把所有字段都改成异步。真正要守住的是状态顺序：新输入产生新 requestId，旧响应没有资格改写当前错误提示。

上线前按这条顺序复查

1. 从输入框点到字段组内按钮，确认提示不会被清空后又闪回。
2. 从输入框点到下一个字段，确认 relatedTarget 不在当前字段组，校验只执行一次。
3. 用脚本动态追加一个 data-field 字段，确认 form 的 focusout 仍能找到它。
4. 连续输入两个价格值，确认旧的 requestId 响应不会覆盖最后一次结果。
5. 按 Tab 离开页面或切换窗口，确认 relatedTarget 为 null 时的提示策略符合产品预期。

排查时优先在开发者工具里打印 event.target、event.relatedTarget 和字段组的 data-field 值。三个值能对上，抖动通常就不再是“浏览器偶发”，而是业务把组内移动误判成了离组。

相关问题

为什么不用 blur 做表单事件委托？

blur 本身不冒泡，事件委托需要额外处理捕获阶段；字段组场景直接使用会冒泡的 focusout 更直观。

relatedTarget 一定有值吗？

不一定。切出文档或浏览器因安全原因隐藏目标时可能是 null，代码应把它当作“无法确认仍在组内”处理。

为什么还要检查 form.contains(field)？

动态页面可能在事件触发后移除节点，额外确认字段仍属于当前表单，可以避免旧节点继续改写界面。

表单失焦校验的稳定关键不是增加更多监听器，而是把焦点移动分成“组内”和“组外”两种状态：focusout 负责统一入口，closest 负责找到字段组，relatedTarget 负责判断边界，异步场景再用 requestId 保住结果顺序。