Фокус и размытие событий 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>");
})

Обе формы работают с событиями click и change:

$('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. Поэтому сценарии, которые полагаются на делегирование события с событием focus, не будут работать согласованно в разных браузерах. Однако в версии 1.4.2 jQuery обходит это ограничение, сопоставляя фокус с событием focusin в своих методах делегирования событий .live () и .delegate ().

И в соответствии с фокусом документа jQuery:

Событие focusin отправляется элементу, когда он или любой элемент внутри него получают фокус. Это отличается от события фокуса тем, что оно поддерживает обнаружение события фокуса на родительских элементах (другими словами, оно поддерживает всплытие событий).

Уже слишком поздно для меня или одно противоречит другому?

Answer 1

Да, похоже, документы jQuery вводят в заблуждение.Я полагаю, что в документации по focus не упоминается, что это было для элементов, которые не участвуют в пользовательском вводе (@Ohgodwhy перечислил их выше в комментариях к вашему вопросу).

Я предполагаю, что это как-то связано с необходимостью браузера перехватывать курсор в элементе ввода, который имеет focus, чтобы он мог принимать ввод с клавиатуры.Другими словами, если бы jQuery позволил ему всплыть, то вам никогда бы не дали возможность ввести поле ввода.

В любом случае вы никогда не получите форму для принятия события focus, если только высначала поместите tabindex на него: http://jsfiddle.net/qxLqP/, но если поле на основе ввода получает фокус первым, оно никогда не будет пузыриться.По умолчанию элемент form не имеет tabindex, и вы не можете установить фокус на то, что не имеет tabindex.

Я бы просто принял решение @ Ohgodwhyиспользования focusin и затем сообщайте команде jQuery об их запутанной документации.

Answer 2

Как отметил Оггоди, использование focusin вместо focus работает.

Однако я не могу понять, как может работать следующий код, если событие "focus" не всплывает:

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

Если дочерний элемент диапазона формы получает событие «focus», это означает, что событие всплыло от входа в диапазон.Даже это работает!

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

Итак ... использование "focusin" решает проблему, но я не полностью удовлетворен этим обходным решением.Если у кого-нибудь есть лучший ответ, я с радостью приму его.

Answer 3

Jquery имеет функцию кросс-браузера, которая заботится о делегировании фокуса.

Chrome, Safari и Opera поддерживают событие DOMFocusIn, которое фактически делегирует.

IE поддерживает событие «focusin» для делегирования фокуса.

Firefox поддерживает «focus» только на фазе захвата, а не на фазе пузырьков.

jQuery сделал кросс-браузерное событие, котороеэто «фокус», который фактически делегирует.

Я надеюсь, что это ответит на все ваши сомнения.