Стоп-элемент исчезает при нажатии

Question

Я пишу простой плагин jQuery, который будет динамически размещать div под текстовым полем, когда он имеет фокус. Я смог получить позицию практически во всех браузерах.

Я должен приложить два обработчика событий также на событиях focus и blur текстового поля. И это работает нормально, но проблема в том, что div, который был помещен под текстовое поле, закрывается, даже когда мы нажимаем на него. Теперь имеет смысл, почему так получилось, потому что текстовое поле теряет фокус, но есть ли способ остановить его?

Я попытался это прикрепление к проводнику размытия событий -

if($(mainElem).is(":focus")) return; 

где mainElem является DIV, что показано ниже текстового поля.

Проблема jsFiddle to illustrate.

Answer 1

Вы не собираетесь быть в состоянии использовать blur событие, если вы хотите разместить «интерактивные» элементы в DIV, который показывает. Один из способов решения этой проблемы - связать прослушиватель событий с более глобальным элементом, например document, а затем отфильтровать цели.

Вот пример кода:

$(document).on('click', function (e) { 
     var targetEl = e.target, 
      parent = $(e.target).parents()[0]; 
     if (relElem[0] === targetEl || self[0] === targetEl || self[0] === parent) { 
      $(mainElem).show(); 
     } else { 
      $(mainElem).hide(); 
     } 
}); 

Вот обновление вашей скрипки: http://jsfiddle.net/9YHKW/6/

Answer 2

Это скрипка, что я бросил вместе для проекта некоторое время назад: http://jsfiddle.net/MYcZx/4/

Хотя она не основана с вашей скрипки (и я прошу прощения) Я считаю, что функциональность является таким же, как и то, что ты ищешь. В моем примере не указаны поля ввода, а пробелы, которые содержат значения. И хотя я не управляю фокусом/размытием, вы можете добавить атрибут tabIndex к промежуткам, а затем добавить триггер в фокус, который откроет меню.

var $sub = $('.subscription'); 

$sub 
    .on('click', '.remove', function() { 
     $(this).parent().remove();  
    }) 
    .on('click', 'li', function(e) { 
     var $this = $(this), 
      $parent = $this.parent(), 
      $options = $parent.children('li'), 
      $value = $parent.siblings('.value'), 
      isMulti = $parent.hasClass('multi'), 
      values = []; 

     if(!isMulti) { 
      $options.removeClass('active');    
     } 

     $this.toggleClass('active'); 

     $options.filter('.active').each(function() { 
      values.push($(this).text()); 
     }); 

     $value.text(values.join(', ') || 'select'); 

     $value[(values.length ? 'add' : 'remove') + 'Class']('set'); 
    }); 

var $clone = $sub.clone(true); 

$('.new') 
    .on('click', function() { 
     $(this).before($clone.clone(true)); 
    });