javascript - 如果focusout正在进行，如何停止fadeOut

Question

当我选择其中一个复选框时，我希望该复选框容器不应该淡出。我怎样才能做到这一点？

现场演示

$(document).ready(function(){
  $(".textbox").focus(function(){
    $(".checkboxcontainer").fadeIn('fast');
  });
  $('.checkbox').change(function(){
    $(".checkboxcontainer").show();
  });
  $(".textbox").focusout(function(){
    $(".checkboxcontainer").fadeOut('fast');
  });
});

Answer 1

添加一个停止：

$(document).ready(function () {
    $(".textbox").on({
        focus: function () {
            $(".checkboxcontainer").fadeIn('fast');
        },
        blur: function () {
            $(".checkboxcontainer").fadeOut('fast');
        }
    });
    $('.checkbox').on('change', function () {
        $(".checkboxcontainer").stop(true, true).show();
    });
});

小提琴

您也可以使用一个小的超时，并检查哪个元素有焦点，然后清除超时并重置焦点等。

$(document).ready(function () {
    var active, timer;
    $(".textbox").on({
        focus: function () {
            $(".checkboxcontainer").fadeIn('fast');
        },
        blur: function () {
            timer = setTimeout(function() {
                $(".checkboxcontainer").fadeOut('fast');
            },300);
        }
    });
    $('.checkbox').on({
        mousedown: function() {
            active = document.activeElement;
        },
        change: function () {
            clearTimeout(timer);
            active.focus();
        }
    });
});

小提琴