mouseleave /输入bind / unbind逻辑

时间:2014-06-30 17:28:38

标签: javascript jquery

我正在尝试为表单构建一个简单的脚本。当用户将鼠标悬停在容器div上时,脚本将显示该表单。然后我想检查用户是否点击任何表单输入,如果不是表单将隐藏。如果输入或文本区域是焦点,我取消绑定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");
            }
});

2 个答案:

答案 0 :(得分:0)

就个人而言,我不想使用.hover或.on。我使用.mouseenter和.mouseleave。然后,如果你只是创建一个.mouseenter,那么就没有代码可以将它重新置于未聚焦状态。这是一个例子:

  

$("#东西&#34)。的mouseenter(函数(){      $(本).animate({          //某些css或其他什么。      })   })   只要你不放一个.mouseleave,它就不应该失焦。

答案 1 :(得分:0)

首先,有点偏离主题:我建议不要在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')) {