Блог

Я пытаюсь создать простой скрипт для формы. Скрипт покажет форму, когда пользователь наведет курсор мыши на div контейнера. Затем я хочу проверить, нажимает ли пользователь на какую-либо форму ввода, если нет, форма скроется. Если в фокусе находится поле ввода или текстовое поле, я отменяю mouseleave. Если пользователь хочет закрыть форму на этом этапе, ему нужно нажать на кнопку закрытия.

Проблема, с которой я сейчас сталкиваюсь, заключается в том, что после того, как у меня есть ввод в фокусе, и я закрываю форму, при следующем наведении курсора форма не скрывается. Я должен снова нажать кнопку закрытия. Как мне «сбросить» или отключить отмену привязки mouseleave, когда пользователь нажимает «Закрыть»?

Это соответствующая часть скрипта:

 $(".close").on('click', function() {
    $(".background").removeClass("green");
    $(".q-form").hide();
    $('.close').hide();
});

$(".container-background").on('mouseenter', function(){
    $('.q-form').show();
    $('.close').show();
    $('.background').addClass("green");
});

$(".container-background").on('mouseleave', function() {
    f ($('#contactForm input').is(':focus')) {
        $(".container-background").off("mouseleave"); 
            } else { 
                $('.q-form').hide();
                $('.close').hide();
                $('.background').removeClass("green");
            }
});
  

Во-первых, небольшой оффтопик: я не рекомендую проверять input вход :focus . Лучший подход для описанного вами сценария — иметь:

 $(document).on("focus", "#contactForm input", function() {
    $(".container-background").off("mouseleave");
});
  

Что касается проблемы, с которой вы столкнулись при отвязке обработчика событий, вы можете просто повторно подключить его при закрытии формы:

 $(".container-background").on("mouseleave", myFunction);
$(".close").on('click', function() {
    $(".background").removeClass("green");
    $(".q-form").hide();
    $('.close').hide();
    $(".container-background").off("mouseleave", myFunction)
                              .on("mouseleave", myFunction);
});
var myFunction = function() {
    // You won't need this condition if you also do what's above
    if (!$('#contactForm input').is(':focus')) {
        $('.q-form').hide();
        $('.close').hide();
        $('.background').removeClass("green");
    }
};
  

Если подумать, вы также можете просто сделать это и .off() вообще не вызывать вызов:

 if (!$('#contactForm input').is(':focus')) {
  

Лично мне не нравится использовать .наведите курсор или .on. Я использую .mouseenter и .mouseleave . Тогда, если вы просто создадите .mouseenter , не будет кода, чтобы вернуть его в несфокусированное состояние. Вот пример:

$(«#something»).mouseenter(функция (){ $(this).animate({ // какой-нибудь css или что-то еще. }) }) пока вы не поместите .mouseleave , он не должен расфокусироваться.