Question

我正在尝试为表单构建一个简单的脚本。当用户将鼠标悬停在容器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");
            }
});

Answer 1

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

$（＆＃34;＃东西＆＃34）。的mouseenter（函数（）{ $（本）.animate（{ //某些css或其他什么。 }） }）只要你不放一个.mouseleave，它就不应该失焦。

Answer 2

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

mouseleave /输入bind / unbind逻辑

2 个答案: