如何让Angular中input的(change)事件优先于按钮(mousedown)事件执行

问题本质 #

浏览器原生事件触发顺序是固定的：mousedown → 输入框失焦 → change → mouseup → click，原生层面无法调整change和mousedown的先后顺序，只能从业务逻辑层面调整适配。

可行解决方案 #

方案1：输入框改用input事件实时保存数据

(change)仅在输入框失焦时触发，替换为(input)事件后，用户每输入一个字符就会调用saveData()，点击按钮时数据已经完成更新，完全无需关心事件顺序问题，改动最小：

<input id={{htmlID}} type="text" [formControl]="frmControl" (input)="saveData()"  />

如果担心saveData触发频繁影响性能，可以加300ms左右的防抖处理即可。

方案2：按钮替换为click事件触发

mousedown是鼠标按下瞬间触发，此时输入框尚未失焦，自然不会执行change事件。替换为click事件后，触发时机在输入框失焦、change执行完成之后，顺序自然符合要求：

<button *ngIf="show" (click)="analyzeClick()" id={{htmlID}}>
  {{label}} 
</button>

方案3：调整analyzeClick的延时逻辑

如果业务要求必须保留mousedown事件，可以将需要执行的逻辑放入setTimeout中，设置0ms延时即可，延时逻辑会被放入宏任务队列，等待当前所有同步事件（包括失焦、change事件）执行完成后再运行。
你之前的代码无效是因为核心逻辑this.runTheCode()放在了setTimeout外面同步执行，setTimeout里仅打了日志，完全没有起到延时作用，正确写法如下：

public analyzeClick(): void {
  setTimeout(() => {
    this.runTheCode();
  }, 0);
}

方案4：直接读取表单最新值消除依赖

既然你已经使用了formControl绑定，输入框的最新值已经实时存储在frmControl.value中，可以直接在analyzeClick中读取表单最新值使用，从根源上消除对saveData执行顺序的依赖。

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