javascript - 第一个 element.focus() 之后未触发元素焦点监听器

Question

在运行单元测试时，我注意到一个相当奇怪的行为，该测试在 PhantomJS 上通过，但在 Chrome、Firefox 和 IE 中偶尔会失败。简而言之:

• 我为 DOM 元素设置了焦点监听器。
• 我调用了 element.focus()，但监听器尚未运行。
• 第二次调用 element.focus() 实际上运行了监听器。

不幸的是，我无法在 fiddle 中重现这个问题，但它可以在例如 jQuery 的网站中完成。我在 Chrome 上执行以下步骤:

1. 打开 www.jquery.com，然后打开 DevTools。
2. 运行 $("input[name=s]").on("focus", () => console.log("a"));。
3. 运行$("input[name=s]").focus();。不生成任何输出。
4. 运行$("input[name=s]").focus();。现在“a”第一次被打印到控制台!

是什么导致了这个问题？我该如何解决它？

Answer 1

快速研究了 jquery 源代码，似乎 focus 实际上使用 focusin，并且代码正在尝试映射到 focusin。所以如果你尝试这个:

$("input[name=s]").on("focusin", () => console.log("a"));

$("input[name=s]").focusin();

它会起作用的。 focus 和 focusin 在冒泡方面是有区别的:

http://api.jquery.com/focusin/

The focusin event is sent to an element when it, or any element insideof it, gains focus. This is distinct from the focus event in that itsupports detecting the focus event on parent elements (in other words,it supports event bubbling).

该行为似乎是一个难以复制的错误，这一定是由某处的其他代码(可能是库)引起的。尽管上面的代码应该有助于解决这个问题。