Firefox 63 - .focus() 没有触发文本输入的“焦点”事件答案

【问题标题】：Firefox 63 - .focus() is not firing "focus" event for text inputFirefox 63 - .focus() 没有触发文本输入的“焦点”事件
【发布时间】：2019-04-10 00:54:38
【问题描述】：

这是一个代码笔来演示我所看到的： https://codepen.io/anon/pen/zMvxPy

HTML：

<input type="text" />

JS：

$('input').on('focus', () => {
  console.log('focused...')
});

$('input').focus();

在 Chrome 上，文本输入将获得焦点并触发“焦点”事件。在 Firefox (63.0.1) 上，文本输入没有焦点，也没有触发焦点事件。

但是，您可以单击文本输入，“焦点”事件将正确触发。

关于为什么 .focus() 方法没有在 Firefox 中触发“focus”事件的任何解释...？

注意：我知道调用 .focus() 可以通过单击按钮（如在https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/focus#Focus_on_a_text_field 中）来工作，但此示例用于在初始页面加载期间调用 .focus()。

【问题讨论】：

每当您观察到特殊行为时，我总是尝试的第一件事就是不使用 jQuery，因为 jQuery 在原生 DOM API 事件之上有自己的事件系统。

标签： javascript firefox

【解决方案1】：

对于遇到此问题的其他人，事实证明我打开了 Firefox 开发工具，而 Firefox 将重点放在页面加载上，而不是在初始渲染期间调用了 .focus() 的任何项目。

几个观察：

这种行为也出现在 Web 编辑器中，例如 CodePen 或 StackBlitz。 Firefox 优先关注编辑器窗格，而牺牲代码本身中的任何初始 .focus() 调用。
对于 Angular 应用程序，即使在 ngAfterViewInit() 中调用 .focus() 也会被 Firefox 最初对开发控制台的关注所覆盖。
- 例如，无论是否打开开发工具，尝试在 Firefox 中打开 https://angular-77iyz4.stackblitz.io。仅当开发工具关闭时，文本输入才会被聚焦。在 Chrome 中这无关紧要。

【讨论】：