聚焦和模糊jQuery事件而不是冒泡

Question

使用以下html結構：

<div>
<form><span><input></span></form>
</div>
<p>

和以下jquery代碼：

$('form').on("focus", function(event) {
    $("p").append("focus no delegation<br>");
})

為什么焦點事件沒有到達我的事件處理程序？ 使用選擇器參數綁定事件可以正常工作：

$('form').on("focus", "input", function(event) {
    $("p").append("focus delegation<br>");
})

活動下一個片段的作用，所以焦點事件實際上泡沫......

$('form').on("focus", "span", function(event) {
    $("p").append("focus delegation<br>");
})

兩種形式都適用於點擊和更改事件：

$('form').on("click", function(event) {
    $("p").append("click no delegation<br>");
})
$('form').on("click", "input", function(event) {
    $("p").append("click delegation<br>");
})

我發現關於焦點事件冒泡的唯一注意事項是相對於我不使用的舊jQuery版本。 在這里看到它

編輯1

這很令人困惑......根據jQuery的焦點文檔：

焦點事件不會在Internet Explorer中冒泡。 因此，依賴於焦點事件的事件委派的腳本將無法跨瀏覽器一致地工作。 但是，從版本1.4.2開始，jQuery通過將焦點映射到其事件委托方法.live（）和.delegate（）中的focusin事件來解決此限制。

根據jQuery的焦點文檔：

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

對我來說為時已晚還是與另一方相矛盾？

Answer 1

正如Ohgodwhy指出的那樣，使用focusin而不是焦點確實有效。

但是，如果“焦點”事件沒有冒泡，我無法理解以下代碼如何工作：

$('form').on("focus", "span", function(event) {
    $("p").append("focus delegation<br>");
})

如果表單的span子句收到“焦點”事件，則表示事件從輸入冒泡到span。 即便如此！

$('div').on("focus", "form", function(event) {
    $("p").append("focus delegation<br>");
})

所以...使用“focusin”確實解決了這個問題，但我對這個解決方法並不完全滿意。 如果有人有更好的答案，我會高興地接受它。

Answer 2

是的，似乎jQuery文檔具有誤導性。 我認為關於focus的文檔忽略了提到這是針對不涉及用戶輸入的元素（@Ohgodwhy在你的問題的評論中將它們列在上面）。

我想這與瀏覽器需要將光標捕獲到具有focus的輸入元素有關，因此它可以接受來自鍵盤的輸入。 換句話說，如果jQuery允許它冒泡，那么你永遠不會有機會輸入輸入字段。

無論哪種方式，你永遠不會得到一個表單來接受focus事件，除非你首先在它上面添加一個tabindex ： http ： //jsfiddle.net/qxLqP/但是如果基於輸入的字段首先獲得焦點，它將永遠不會冒泡。 默認情況下， form元素沒有tabindex ，並且您無法將焦點設置為沒有tabindex 。

我只是接受@使用Ohgodwhy的解決方案focusin ，然后去讓jQuery開發團隊了解他們的困惑文檔。

Answer 3

Jquery有一個跨瀏覽器功能，負責焦點授權。

Chrome，safari和opera支持名為“DOMFocusIn”的事件，該事件實際上是代表。

IE支持用於委派焦點的事件“focusin”。

Firefox僅支持捕獲階段而非冒泡階段的“焦點”。

jQuery創建了一個跨瀏覽器事件，它實際上是委托的“焦點”。

我希望這能解決你所有的疑慮。