jquery - 当focusin在同一个元素上触发时如何防止focusout？

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