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

Question

我正在将一个 .active class 附加到 div，它环绕着一个输入和标签。

我的问题是，当在包裹 DIV 内单击元素时，将触发 focusout，这会导致样式出现轻微闪烁。

$('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

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

How to prevent focusout when focusin fires on the same element?

jquery

focusout

focusin