当focusin触发同一个元素时，如何防止焦点出现？

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