javascript - Firefox 63 - .focus() 没有为文本输入触发 "focus"事件

Question

这是一个代码笔来演示我所看到的: 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 事件。

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

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

注意:我知道调用 .focus() 的方式类似于单击按钮(如 https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/focus#Focus_on_a_text_field 中所示)，但此示例用于在初始页面加载期间调用 .focus()。

Answer 1

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

一些观察:

1. 此行为也出现在 CodePen 或 StackBlitz 等网络编辑器中。 Firefox 以代码本身中的任何初始 .focus() 调用为代价优先关注编辑器 Pane 。
2. 对于 Angular 应用程序，即使在 ngAfterViewInit() 中调用 .focus() 也会被 Firefox 在开发控制台上的初始焦点覆盖。
   • 例如，尝试打开 https://angular-77iyz4.stackblitz.io在打开和不打开开发工具的 Firefox 中。仅当开发工具关闭时，文本输入才会聚焦。在 Chrome 中，这无关紧要。