焦点和模糊 jQuery 事件不冒泡

具有以下html结构:

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

以及下面的jquery代码:

$('form').on("focus", function(event) {$("p").append("焦点没有委托<br>");})

为什么焦点事件没有到达我的事件处理程序?使用选择器参数绑定事件可以正常工作:

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

事件下一个片段有效，因此焦点事件实际上会冒泡......

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

两种形式都适用于点击和更改事件:

$('form').on("click", function(event) {$("p").append("点击不委托<br>");})$('form').on("click", "input", function(event) {$("p").append("点击委托<br>");})

我发现的关于焦点事件冒泡的唯一说明是相对于我不使用的旧 jQuery 版本.在这里

查看它

编辑 1

这很令人困惑……根据 jQuery 的焦点文档:

<块引用>

焦点事件在 Internet Explorer 中不会冒泡.因此，依赖于具有焦点事件的事件委托的脚本将无法在浏览器中一致地工作.然而，从 1.4.2 版本开始，jQuery 通过在其事件委托方法 .live() 和 .delegate() 中将焦点映射到 focusin 事件来解决此限制.

根据jQuery的focusin doc:

<块引用>

focusin 事件在元素或其中的任何元素获得焦点时发送到该元素.这与焦点事件的不同之处在于它支持检测父元素上的焦点事件(换句话说，它支持事件冒泡).

对我来说是太晚了还是两者相矛盾?

解决方案

是的，jQuery 文档似乎具有误导性.我相信关于 focus 的文档忽略了提及这是针对不涉及用户输入的元素(@Ohgodwhy 在您的问题评论中列出了它们).

我想这与浏览器需要将光标捕获在具有 focus 的输入元素中有关，以便它可以接受来自键盘的输入.换句话说，如果 jQuery 允许它冒泡，那么您将永远没有机会在输入字段中输入内容.

无论哪种方式，除非您首先在其上放置 tabindex，否则您将永远无法获得接受 focus 事件的表单:http://jsfiddle.net/qxLqP/ 但如果基于输入的字段首先获得焦点，它将永远不会冒泡.默认情况下，form 元素没有 tabindex，您无法将焦点设置到没有 tabindex 的内容.

我会接受 @Ohgodwhy 的使用 focusin 的解决方案，然后让 jQuery 团队了解他们令人困惑的文档.

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.