問(wèn)題描述

具有以下html結(jié)構(gòu):

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

以及下面的jquery代碼:

$('form').on("focus", function(event) {$("p").append("焦點(diǎn)沒(méi)有委托<br>");})

為什么焦點(diǎn)事件沒(méi)有到達(dá)我的事件處理程序?使用選擇器參數(shù)綁定事件可以正常工作:

$('form').on("focus", "input", function(event) {$("p").append("焦點(diǎn)委托<br>");})

事件下一個(gè)片段有效，因此焦點(diǎn)事件實(shí)際上會(huì)冒泡......

$('form').on("focus", "span", function(event) {$("p").append("焦點(diǎn)委托<br>");})

兩種形式都適用于點(diǎn)擊和更改事件:

$('form').on("click", function(event) {$("p").append("點(diǎn)擊不委托<br>");})$('form').on("click", "input", function(event) {$("p").append("點(diǎn)擊委托<br>");})

我發(fā)現(xiàn)的關(guān)于焦點(diǎn)事件冒泡的唯一說(shuō)明是相對(duì)于我不使用的舊 jQuery 版本.在這里

編輯 1

這很令人困惑……根據(jù) jQuery 的焦點(diǎn)文檔:

焦點(diǎn)事件在 Internet Explorer 中不會(huì)冒泡.因此，依賴(lài)于具有焦點(diǎn)事件的事件委托的腳本將無(wú)法在瀏覽器中一致地工作.然而，從 1.4.2 版本開(kāi)始，jQuery 通過(guò)在其事件委托方法 .live() 和 .delegate() 中將焦點(diǎn)映射到 focusin 事件來(lái)解決此限制.

根據(jù)jQuery的focusin doc:

focusin 事件在元素或其中的任何元素獲得焦點(diǎn)時(shí)發(fā)送到該元素.這與焦點(diǎn)事件的不同之處在于它支持檢測(cè)父元素上的焦點(diǎn)事件(換句話說(shuō)，它支持事件冒泡).

對(duì)我來(lái)說(shuō)是太晚了還是兩者相矛盾?

是的，jQuery 文檔似乎具有誤導(dǎo)性.我相信關(guān)于 focus 的文檔忽略了提及這是針對(duì)不涉及用戶輸入的元素(@Ohgodwhy 在您的問(wèn)題評(píng)論中列出了它們).

我想這與瀏覽器需要將光標(biāo)捕獲在具有 focus 的輸入元素中有關(guān)，以便它可以接受來(lái)自鍵盤(pán)的輸入.換句話說(shuō)，如果 jQuery 允許它冒泡，那么您將永遠(yuǎn)沒(méi)有機(jī)會(huì)在輸入字段中輸入內(nèi)容.

無(wú)論哪種方式，除非您首先在其上放置 tabindex，否則您將永遠(yuǎn)無(wú)法獲得接受 focus 事件的表單:http://jsfiddle.net/qxLqP/ 但如果基于輸入的字段首先獲得焦點(diǎn)，它將永遠(yuǎn)不會(huì)冒泡.默認(rèn)情況下，form 元素沒(méi)有 tabindex，您無(wú)法將焦點(diǎn)設(shè)置到?jīng)]有 tabindex 的內(nèi)容.

我會(huì)接受 @Ohgodwhy 的使用 focusin 的解決方案，然后讓 jQuery 團(tuán)隊(duì)了解他們令人困惑的文檔.

With the following html structure:

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

and the following jquery code:

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

Why doesn't the focus event ever reach my event handler? Binding the event with a selector parameter works fine:

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

Event the next snippet works so the focus event does in fact bubble...

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

Both forms work with click and change events:

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

The only note I found about the focus event's bubbling is relative to older jQuery versions which I don't use. See it in action here

edit 1

Well this is confusing... According to jQuery's focus doc:

The focus event does not bubble in Internet Explorer. Therefore, scripts that rely on event delegation with the focus event will not work consistently across browsers. As of version 1.4.2, however, jQuery works around this limitation by mapping focus to the focusin event in its event delegation methods, .live() and .delegate().

And according to jQuery's focusin doc:

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

Is it too late for me or does one contradict the other?

Yes, it appears the jQuery docs are misleading. I believe the documentation on focus neglected to mention that this was for the elements that aren't involved in user input (@Ohgodwhy listed them above in your question's comments).

I imagine it has something to do with the browser's need to trap the cursor in the input element that has focus, so that it can accept input from the keyboard. In other words, if jQuery allowed it to bubble, then you would never be given the chance to type in the input field.

Either way you'll never get a form to accept a focus event unless you first put a tabindex on it: http://jsfiddle.net/qxLqP/ but if an input based field gets focus first, it will never bubble. By default, the form element doesn't have a tabindex, and you can't set focus to something that doesn't have a tabindex.

I'd just accept @Ohgodwhy's solution of using focusin and then go let the jQuery team know about their confusing documentation.

這篇關(guān)于焦點(diǎn)和模糊 jQuery 事件不冒泡的文章就介紹到這了，希望我們推薦的答案對(duì)大家有所幫助，也希望大家多多支持html5模板網(wǎng)！