onfocusout未触发处理函数，如何正确实现字段失焦标记为touched？

看起来你应该是在 Angular 项目里使用事件绑定吧？因为 (onfocusout) 是 Angular 的语法（原生 HTML 里是小写的 onfocusout="函数名()"）。先帮你排查几个常见的问题点：

1. 确认处理函数的定义是否正确 #

首先要确保你的组件类里已经公开定义了对应的处理函数，比如：

// 组件类里的代码
export class YourComponent {
  // 必须是 public，模板才能访问到
  public onFieldTouched(event: FocusEvent): void {
    console.log('字段失去焦点了！');
    // 标记为 touched 的逻辑
  }
}

如果函数是 private 的，模板根本调用不到，自然不会有任何输出。

2. 检查事件绑定的语法是否匹配环境 #

• 如果你是在普通 HTML/JS 环境下，不能用 Angular 的括号语法，得换成原生写法：

<input type="text" onfocusout="onFieldTouched(event)">

对应的 JS 函数要放在全局作用域（或者确保能被访问到）：

function onFieldTouched(event) {
  console.log('字段失去焦点了！');
}

3. 排查事件被阻止冒泡的情况 #

focusout 是会冒泡的事件，如果父元素上也绑定了 (focusout) 并且调用了 $event.stopPropagation()，那子元素的事件就不会触发了。可以试试换成不会冒泡的 (blur) 事件测试：

<input type="text" (blur)="onFieldTouched($event)">

4. 确认元素是否被动态渲染 #

如果你的输入框是通过 *ngIf、*ngFor 或者其他方式动态生成的，要确保事件绑定的时候元素已经存在于 DOM 中。比如 *ngIf 条件不满足时，元素还没渲染，事件自然不会生效。

最后别忘了打开浏览器控制台看看有没有报错——比如“函数未定义”这类提示，往往能直接定位问题！

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