jQuery выясняет, потерял ли родитель «фокус»

Question

Я застрял на выяснении логики, чтобы сделать доступную клавиатуру с раскрывающимся меню.

HTML, структурирована таким (названия экстра-класса, используемых для ясности):

<ul> 
    <li class="primaryMenuItem"> 
     <a href="">Link 1</a> 
     <ul class="popUpMenu"> 
      <li><a href="">Sub Link 1</a></li> 
      <li><a href="">Sub Link 2</a></li> 
     </ul> 
    </li> 
    <li class="primaryMenuItem"> 
     <a href="">Link 2</a> 
     <ul class="popUpMenu"> 
      <li><a href="">Sub Link 1</a></li> 
      <li><a href="">Sub Link 2</a></li> 
     </ul> 
    </li>  
</ul> 

Ссылка 1 и Ссылка 2, когда колебались, покажет список подменю (выпадающее меню). У меня это работает отлично с некоторыми jQuery и плагином jQuery hoverIntent.

Уловка заключается в том, что это только работает с мышью в данный момент.

Следующая задача - заставить это работать с клавиатуры.

я могу легко добавить событие фокусировки верхних звеньев уровня, которые затем вызывают вторичное меню:

$('ul.primaryMenuItem a:first').focus([call showMenu function]) 

Это работает отлично.

Чтобы закрыть меню, при открытии другого меню выберите один из вариантов, чтобы проверить, есть ли еще один открытый и, если да, закройте его.

Это также хорошо работает.

Если это не удается, это если вы открыли последнее меню и вышли из него. Поскольку вы не вошли в другое меню, он остается открытым.

Задача состоит в том, чтобы выяснить, как и когда нужно закрыть меню и необходимую логику (jQuery), чтобы понять это. В идеале я бы закрыл меню, когда основное внимание уделяется элементу на странице OTHER, чем любые дочерние элементы меню.

Логически, я ищу это:

$('li.primaryMenuItem').blur([close $(this).find('ul.popUpMenu')) 

Однако, вы не можете сделать это, так как LI фактически не имеет фокуса, а якорь тег внутри него.

Любые предложения?

UPDATE:

, возможно, лучше/простой способ задать вопрос:

Via JQuery, есть способ «часы», чтобы увидеть, если фокус перемещается за пределы всех детей определенного объекта ?

Answer 1

Используйте новые функции jquery 1.4: focusin и focusout вместо blur и focus. Вот как focusout отличается:

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

Answer 2

Попробуйте

$('li.primaryMenuItem:last li a:last').blur([do whatever you need to do]) 

Логически, если ваши закладки пользователя из он должен был фокусировать последний якорь.

Вы можете даже создать свой собственный обработчик события так:

$('li.primaryMenuItem:last').bind('myblur', function() ...); 

и вызвать его в течение последних якорей размытости событие:

...blur(function() { 
    $(this).parents('li.primaryMenuItem').trigger('myblur'); ... 

Answer 3

Вы можете использовать событие кипящего, чтобы проверить, что имеет фокус на мероприятии focusin. Я имел успех со следующим кодом:

$("li:has(ul.popUpMenu)").focusin(function(e) { 
    $(this).children().fadeIn('slow'); 
    }); 
    $('body').focusin(function(e) { 
    if (!$(e.target).parent().is('ul.popUpMenu li')) { 
     $('ul.popUpMenu').fadeOut('slow'); 
    } 
    }); 

Вы можете (должны), вероятно, сделать его более оптимизирован, но это работает.

Answer 4

Это помогло мне ... http://plugins.jquery.com/project/focus

Это будет обнаружить, если вы все еще в пределах родителя автоматически. В основном это изменяет фокусировку jQuery, чтобы работать таким образом, но я чувствую, как это должно работать.

<div class="parent"> 
    <input type="text" /> 
    <input type="text" /> 
</div> 

$('#parent').focusout(function() { 
    console.log('focusout of parent'); 
}); 

Я не понимаю, почему вкладка прессования, чтобы переместить текстовое поле между дочерними элементами должны вызывать focusout на родитель, потому что вы все еще в пределах этого родителя. Что-то должно происходить, что вытаскивает вас из него на мгновение, и я подозреваю, что это ошибка ... кто-нибудь со мной по этому поводу? Ну, в любом случае плагин выше исправляет его. Просто включите его перед своим кодом, чтобы «исправить» это. Хотел бы кого-нибудь объяснить, почему это не ошибка, если это не так.

Спасибо, Дом

Answer 5

Как насчет, если вы делаете следующее:

$('#link_A_id, #link_A_id > *').focusout(function() { 
    if ($(document.activeElement).closest('#link_A_id').length == 0) 
     //focus is out of link A and it's children 
}); 

Answer 6

У меня была аналогичная проблема ... Я создал jsfiddle, чтобы определить, когда родитель FIELDSET теряет фокус и затем вызвать функция. Это, безусловно, можно было бы оптимизировать, но это начало.

http://jsfiddle.net/EKhLc/10/

function saveFields() { 
    $.each($('fieldset.save'),function(index, value) { 
    // WHERE THE POST WOULD GO 
    alert('saving fieldset with id '+ value.id); 
    $(value).removeClass('save'); 
    }); 

} 
$('.control-group').focusin(function(){ 
    var thefield = $(this).parent('fieldset'); 
    if (!thefield.hasClass('active')) { 
    if($('fieldset.active').length > 0){ 

     $('fieldset.active').removeClass('active').addClass('save'); 
     saveFields(); 
     } 
    thefield.addClass('active'); 
    } else { 
     console.log('already active'); 
    } 
});