谷歌浏览器在警报被解除前执行HTMLElement.focus。

Question

研究发现，Google Chrome与Firefox和Edge相比，会产生不同的行为。

function lossFocus(e) {
  alert('blur'); // prompt alert
  e.focus();     // focus back to textbox
}

<input type="text" onblur="lossFocus(this);" />
<!-- NOTE: You may need to refresh this page after trigger onblur in Chrome to avoid popup loop -->

这个结果是 lossFocus 在谷歌浏览器中被无休止地触发为 focus 在用户按OK键或回车键取消弹出对话框之前就被执行了，但在其他浏览器上却不是这样。(Edge在用户按下确定键或回车键解除弹出式对话框之前，成功地将输入框聚焦回来。alert)原因是什么，这是一个预期的行为吗？

window.confirm() 捕捉用户输入后执行代码似乎很有前途，这是否意味着我们应该远离 window.alert() 如果我们想让代码在得到用户反馈后才执行？

Answer 1

目前还没有深入了解，但发现其中一个变通方法是用nil超时来包装罪魁祸首，就像下面这样。

function lossFocus(e) {
  alert('blur');
  setTimeout(() => { e.focus(); }, 0); // focus properly now after dismiss popup
}

<input type="text" onblur="lossFocus(this);" />