在第一個element.focus（）之后未觸發元素焦點偵聽器

Question

在運行通過PhantomJS通過但偶爾在Chrome，Firefox和IE中失敗的單元測試時，我注意到一個相當奇怪的行為。 簡而言之：

• 我為DOM元素設置了焦點偵聽器。
• 我調用element.focus() ，但監聽器未運行。
• 第二次調用element.focus()實際上運行了偵聽器。

不幸的是，我無法重提這個問題，但是可以在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/

當focusin事件或其中的任何元素獲得焦點時，會將focusin事件發送到該元素。 這與焦點事件不同，因為它支持檢測父元素上的焦點事件（換句話說，它支持事件冒泡）。

似乎該行為很難復制，這必須由某處的其他代碼（可能是庫）引起。 盡管上面的代碼應該可以解決該問題。