Как предотвратить фокусировку при фокусировке на одном элементе?

Question

Я присоединяю класс.active к div, который обернут вокруг ввода и метки.

Моя проблема заключается в том, что при щелчке элемента внутри обернутого DIV фокусировка срабатывает, и это вызывает легкое мерцание стиля.

$('body')
    .on('focusin', '.formlabel', function() {

        $(this).addClass('active');

    })
    .on('focusout', '.formlabel', function() {

        $('.formlabel').removeClass('active');

    });

Вот пример: http://jsbin.com/mamacogimo/1/edit?html,js,output - щелкните ярлык и элемент в раскрывающемся списке. Вы заметите, как мерцает синий фон.

Есть ли способ предотвратить мерцание?

Answer 1

Вы можете использовать тайм-аут, например, так:

var timeout;
$('body').on('focusin', '.formlabel', function() {
  $(this).addClass('active');

  clearTimeout(timeout);

}).on('focusout', '.formlabel', function(e) {
  timeout = setTimeout(function() {
    $('.formlabel').removeClass('active');
  }, 250);
});

http://jsbin.com/dafubiweto/2/edit