焦点和模糊jQuery事件不冒泡 [英] Focus and blur jQuery events not bubbling

问题描述

使用以下html结构：

With the following html structure:

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

和以下jquery代码：

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>");
})

关于焦点事件的冒泡是相对于我不使用的旧的jQuery版本。查看操作此处

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

这很混乱...根据jQuery的焦点文档：

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

焦点事件不在Internet Explorer中的气泡。因此，依赖事件委托与焦点事件的脚本在浏览器之间不会一致。然而，从版本1.4.2开始，jQuery通过将焦点映射到事件委托方法.live（）和.delegate（）中的focusin事件来解决这个限制。

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().

根据jQuery的焦点文档：

And according to jQuery's focusin doc:

将focusin事件发送到元素时，或其中的任何元素，获得关注。这与焦点事件不同，它支持检测父元素上的焦点事件（换句话说，它支持事件冒泡）。

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?

推荐答案

是的，看来jQuery文档是误导的。我相信焦点中的文档被忽略地提到这是针对不涉及用户输入的元素（@Ohgodwhy在您的问题的评论中列出它们）。

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).

我想象它与浏览器需要将光标置于 focus 的输入元素中有关系，以便它可以接受来自键盘的输入。换句话说，如果jQuery允许它浮动，那么你永远不会有机会输入输入字段。

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.

无论如何，你永远不会得到一个表单要接受一个焦点事件，除非你先把一个 tabindex ： http://jsfiddle.net/qxLqP/ ，但是如果基于输入的字段首先得到焦点，它将永远不会浮动。默认情况下，表单元素没有 tabindex ，您无法将焦点设置为没有一个 tabindex 。

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.

我只是接受@ Ohgodwhy使用 focusin 然后去让jQuery团队了解他们令人困惑的文档。

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

这篇关于焦点和模糊jQuery事件不冒泡的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！